react项目的创建及使用状态管理（redux）

1.创建项目

1.1打开vsCode，点击打开文件夹，选择需要将新建的react项目存放的文件夹

1.2创建react项目

ctrl+J打开终端控制台，输入命令npx create-react-app 项目名称

npx create-react-app my-project

1.3项目运行

1.4项目清理

2.使用redux状态管理

2.1安装Redux Toolkit和react-redux

npm i @reduxjs/toolkit react-redux

2.2创建store实例

2.2.1创建文件

src中创建store文件夹，store中创建index.js和modules文件夹，module中创建counterStore.js

2.2.2实现流程

第一步：在counterStore.js进行创建片段实例，定义变量、定义操作的方法，暴露出方法和实例；

第二步：在store入口文件将子模块实例进行挂载注册，得到store实例并暴露store实例；

第三步：在项目入口文件index.js进行状态管理store实例的挂载注册；

第四步：在需要使用状态管理的组件中进行引入使用

2.2.3具体代码

store/modules/counterStore.js文件

// store/modules/counterStore.js该文件为子模块
// createSlice用于创建片段

// 第一步：引入createSlice
import { createSlice } from "@reduxjs/toolkit"

// 第二步：创建片段实例，这个过程就是定义名称、定义变量、定义操作的方法
// name为片段名称
// initialState为存储变量的地方，用于放自己想要的变量，相当于vue状态管理中的state
// reducers为定义方法的地方，用于更改状态变量或做一些操作的地方，相当于vue状态管理中的Mutations
const counterStore = createSlice({
    name: 'counter', // 名称
    initialState: { // 初始化变量，相当于vue状态管理中的state
        count: 10
    },
    reducers: { // 修改状态的方法 同步方法 支持直接修改 相当于vue状态管理中的Mutations
        increment(state) { // 加
            state.count++
        },
        decrement(state) { // 减
            state.count--
        }
    }
})

// 第三步：将reducer和修改状态变量的方法暴露出去
// 解构出来方法，用于点击加减操作，相当于vue状态管理中的actions
const { increment,decrement } = counterStore.actions
// 获取reducer，用于在状态管理入口文件index.js中进行注册
const counterReducer = counterStore.reducer

// 以按需导出的方式导出actionCreater
export { increment, decrement}
// 以默认导出的方式导出reducer
export default counterReducer

store/index.js

// store/index.js该文件为状态管理的入口文件
// configureStore用于创建store实例
import { configureStore } from "@reduxjs/toolkit";

// 导入子模块reducer，用于注册子模块
import counterReducer from './modules/counterStore'

const store = configureStore({
    reducer:{ // 注册子模块的地方，可以注册多个子模块
        counter:counterReducer, // counter是自己随便定义的，一般是子模块片段name，用于需要使用该子模块的变量的组件中,本案例中App组件中有使用到
    }
})
// 将状态管理实例暴露出去，用于react项目入口文件中挂载注册（index.js）
export default store

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

import { Provider} from 'react-redux' // 理解为一个用于挂载注册store的桥梁
import store from './store'; // 引入实例进行挂载注册

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

src/App.js

// 该文件为主组件
// useSelector用于获取状态变量
// useDispatch用于调动改变状态变量的方法
import { useSelector,useDispatch } from 'react-redux';
import {increment,decrement} from './store/modules/counterStore' // 引入状态管理中子模块的加减方法

function App() {
  const {count} = useSelector(state=>state.counter) // 获取状态变量
  const dispatch = useDispatch();

  return (
    <div className="App">
      <button onClick={()=>dispatch(increment())}>+</button>
      <span>数量:{count}</span>
      <button onClick={()=>dispatch(decrement())}>-</button>
    </div>
  );
}

export default App;