使用React ToolKit(RTK) 创建基本的state存储库

环境准备

首先准备一个react环境（使用create-react-app）

npx create-react-app my-redux-app
cd my-redux-app

然后安装RTK

npm install react-redux @reduxjs/toolkit

这样基本的环境就搭建好了

结构搭建

首先在src目录下创建一个store文件夹：

cd src
mkdir store

假如我想创建一个singer的state，就可以在store里面创建一个名为singer的文件夹，在文件夹内创建index.js，并写入以下代码

import { createSlice } from "@reduxjs/toolkit"
//需要一个配置对象作为参数，通过对象的不同属性来指定他的配置
//创建reducer切片，将来可以合并成一个切片
const stuSlice = createSlice({
    name: 'stu',// 用来自动生成action中的type
    initialState: {
        name: 'kano',
        age: 19,
        address: 'Japan'
    }, //state的初始值
    reducers: {// 指定state的各种操作
        setName(state, action) {
            // 可以通过不同的方法来指定state的不同的操作
            // 两个参数：state，这个state的是一个代理对象，可以直接修改（就和vue一样）
            state.name = 'kanokano'
        },
        setAge(state, action) {
            state.age = 22
        },
        stateSet(state, action) {
            state.name = action.payload
        }
    }
})
//切片对象会自动给我们生成Action
export const { setName, setAge, stateSet } = stuSlice.actions
//导出并命名reducer
export const { reducer: singerReducer } = stuSlice

接着创建index.js文件

touch index.js

这里的index.js文件就是redux的总出口，接下来编辑index.js

//创建一个store
import { configureStore } from '@reduxjs/toolkit'
import { singerReducer } from './singer'

//创建store 用来创建store对象\合并slice切片，需要配置对象作为参数
const store = configureStore({
    reducer: {
        singer: singerReducer,
    }
})

export default store

这样就创建好了一个redux store

使用

在src目录下，编辑index.js
从react-redux引入Provider,然后在App组件外套一层Provider
引入store 并在Provider中的store属性中填入引入的store

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux'
import store from './store';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  //使用store
  <Provider store={store}>
    <App />
  </Provider>
);

以在App.js组件中使用Redux state为例

• 引入useSelector、useDispatch
• 引入相关的actions
• 使用useSelector加载state中的数据
• 使用dispatch(actions())来执行创建的动作

import "./App.css";
import { useDispatch, useSelector } from "react-redux";
import { setName, setAge, stateSet } from "./store/singer";
function App() {
  //useSelector用来加载state中的数据
  const singer = useSelector((state) => state.singer);
  const dispatch = useDispatch();
  const setNameHandler = () => {
    //通过dispatch获取构建起触发对象
    dispatch(setName());
    dispatch(setAge());
  };
  const setInputNameHandler = (e) => {
    dispatch(stateSet(e.target.value));
  };
  return (
    <div>
      <p>{singer.name}</p>
      <p>{singer.age}</p>
      <p>{singer.address}</p>
      <p>
        <button onClick={setNameHandler}>修改name&age</button>
        <input type="text" onChange={setInputNameHandler} />
      </p>
    </div>
  );
}

export default App;