React+Redux项目中如何在localhost读取JSON文件？求助

Hey there! I totally get where you're coming from—using a local JSON file to drive your tab setup is such a clean, scalable approach, and it makes perfect sense you don't want to rely on external services just to add new tabs later. Let's walk through a few straightforward, local-first solutions that'll work for your stack:

1. Directly Import the JSON File (Simplest Approach) #

Most React project setups (like Create React App, Vite, or Next.js) let you import JSON files just like regular JavaScript modules. This is the easiest way if you want the JSON data baked into your app bundle, and it supports hot reloading when you edit the file.

Steps: #

• Place your JSON file somewhere in your src directory, for example: src/data/tabs.json
• Import it directly into your Redux slice or component:

  // In your Redux slice file (e.g., tabsSlice.js)
  import tabsData from '../data/tabs.json';
  
  // Initialize your state with the imported data
  const initialState = {
    tabs: tabsData,
    activeTab: tabsData[0]?.id || null // Fallback if the JSON is empty
  };
  
  // Define your reducers and actions as usual
  const tabsSlice = createSlice({
    name: 'tabs',
    initialState,
    reducers: {
      // Your tab logic here (e.g., setActiveTab, addTab)
    }
  });
  

• Now you can access the tab data anywhere in your app using useSelector:

  // In a component
  import { useSelector } from 'react-redux';
  
  function TabBar() {
    const tabs = useSelector(state => state.tabs.tabs);
    
    return (
      <div className="tab-bar">
        {tabs.map(tab => (
          <button key={tab.id}>{tab.label}</button>
        ))}
      </div>
    );
  }
  

Bonus: Every time you add a new entry to tabs.json, your development server will automatically hot-reload the app—no extra steps needed.

2. Fetch the JSON from the Public Directory (Dynamic Loading) #

If you prefer not to bundle the JSON file with your app (e.g., for larger files, or if you want to edit the JSON without restarting the dev server), you can place it in the public folder and fetch it like a static resource.

Steps: #

• Move your tabs.json file into the public directory of your React project
• Use a Redux thunk (or a component useEffect) to fetch the file:

  // In your Redux slice file
  import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
  
  // Async thunk to fetch tabs data
  export const fetchTabs = createAsyncThunk(
    'tabs/fetchTabs',
    async () => {
      const response = await fetch('/tabs.json');
      if (!response.ok) {
        throw new Error('Failed to load tab data');
      }
      return response.json();
    }
  );
  
  const initialState = {
    tabs: [],
    activeTab: null,
    status: 'idle', // idle/loading/succeeded/failed
    error: null
  };
  
  const tabsSlice = createSlice({
    name: 'tabs',
    initialState,
    reducers: {},
    extraReducers: (builder) => {
      builder
        .addCase(fetchTabs.pending, (state) => {
          state.status = 'loading';
        })
        .addCase(fetchTabs.fulfilled, (state, action) => {
          state.status = 'succeeded';
          state.tabs = action.payload;
          state.activeTab = action.payload[0]?.id || null;
        })
        .addCase(fetchTabs.rejected, (state, action) => {
          state.status = 'failed';
          state.error = action.error.message;
        });
    }
  });
  

• Trigger the fetch when your app loads (e.g., in your root component):

  import { useDispatch, useSelector } from 'react-redux';
  import { fetchTabs } from './redux/tabsSlice';
  
  function App() {
    const dispatch = useDispatch();
    const { status, error } = useSelector(state => state.tabs);
  
    useEffect(() => {
      if (status === 'idle') {
        dispatch(fetchTabs());
      }
    }, [dispatch, status]);
  
    if (status === 'loading') return <div>Loading tabs...</div>;
    if (status === 'failed') return <div>Error: {error}</div>;
  
    return (
      <div className="app">
        {/* Your tab components here */}
      </div>
    );
  }
  

Note: When you edit the JSON file in the public folder, just refresh your browser to see the changes—no need to restart the dev server.

Key Notes to Avoid Issues #

• Always validate your JSON syntax—even a missing comma will break imports/fetches!
• If you're using a custom Webpack setup, make sure you have the json-loader configured (most modern setups include this by default).
• For Redux, storing the tab data in state makes it easy to share across components and manage active tabs, additions, etc.

内容的提问来源于stack exchange，提问作者Ivan Burzakovskyi