react基础框架搭建3-配置 Redux：react+router+redux+axios+Tailwind+webpack

黎明初时2026-01-01 8:34

1、创建redux store：

在 src 目录下创建一个 store 文件夹，并在其中创建 index.js 文件

javascript 复制代码

//src/store/index.js

import { configureStore } from '@reduxjs/toolkit';
import authReducer from './authSlice';

const store = configureStore({
  reducer: {
    auth: authReducer,
  },
});

export default store;

2、示例 Slice：

创建src/store目录下创建authSlice.js文件

javascript 复制代码

//src/store/authSlice.js

import { createSlice } from '@reduxjs/toolkit';

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    isAuthenticated: false,
  },
  reducers: {
    login: (state) => {
      state.isAuthenticated = true;
    },
    logout: (state) => {
      state.isAuthenticated = false;
    },
  },
});

export const { login, logout } = authSlice.actions;
export default authSlice.reducer;

3、引入 Redux Store

更新src/index.js

javascript 复制代码

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './store';
import './index.css';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <h1>hello world!</h1>
    </Provider>
  </React.StrictMode>
);

reportWebVitals();