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

最新推荐文章于 2025-12-31 21:11:58 发布

原创最新推荐文章于 2025-12-31 21:11:58 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #webpack #前端

1、创建redux store：

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

//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文件

//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

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();