在react项目中使用redux和reduxjs/toolkit

在react项目中使用redux和reduxjs/toolkit

1. 使用npx创建项目,创建完成之后安装react/redux和@reduxjs/toolkit两个依赖

npx create-react-app test
npm i react/redux @reduxjs/toolkit

2. 新建一个todoSlice.js文件,创建slice片段(在react中称为slice片段,在vue中称为store)

// 初始化一个redux中的state
import { createSlice } from "@reduxjs/toolkit";

const todoSlice = createSlice({
  name: "chp",
  initialState: {
    todos: [1, 2, 3],
  },
  reducers: {
    addState(state, action) {
      state.todos.push(action.payload);
    },
  },
});

export const { addState } = todoSlice.actions;
export default todoSlice.reducer;

3. 在项目根目录下(与启动目录index.js同层级)创建一个store.js文件,将写好的todoSlice文件配置进去,这里有一个很重要的东西就是导入的名字todoStore,这个名字是在使用这个store的时候需要传入useSelector钩子函数内的

//加载todo.js中的reducer
import todoStore from "./redux/todoSlice";
import { configureStore } from "@reduxjs/toolkit";
export default configureStore({
  reducer: {
    todoStore,
  },
});

4. 将store.js配置进启动目录index.js中

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

redux编写完成,开始使用redux。

5. 使用redux的时候有两个不能忘记的钩子函数useSelector,useDispatch,useSelector是获取store内定义的状态值的钩子函数,useDispatch是获取store内定义的方法的钩子函数

import "./App.css";
import { useSelector, useDispatch } from "react-redux";
import { addState } from "./redux/todoSlice";
function App() {
  const { todos } = useSelector((state) => state.todoStore);
  const dispatch = useDispatch();
  const add = () => {
    dispatch(addState(todos.length + 1));
  };
  return (
    <div className="App">
      {todos.map((todo) => {
        return <div key={todo}>{todo}</div>;
      })}
      <button onClick={add}>add</button>
    </div>
  );
}

export default App;