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

NM-BOY

已于 2024-04-12 14:46:03 修改

阅读量350

点赞数 10

文章标签： react.js redux reduxjs/toolkit

于 2024-04-08 22:07:41 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42294411/article/details/137524965

版权

本文详细介绍了如何在React项目中使用Redux和@reduxjs/toolkit，包括创建store、创建slice、配置store以及在组件中使用useSelector和useDispatch。作者一步步展示了如何添加状态管理并实现增删功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

新建一个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;

在项目根目录下(与启动目录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,
  },
});

将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。

使用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;