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

本文主要是介绍在react项目中使用redux和reduxjs/toolkit，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在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;