Redux的使用（含Thunk的使用）

Reaux是在React前端框架中使用的一个可以管理全局状态的一个工具，能更好的管理我们全局项目的一个工具

官方网地址：Redux 中文官网 - JavaScript 应用的状态容器，提供可预测的状态管理。 | Redux 中文官网

一、下载

react-redux是基于redux这个包的，所以我们需要在安装redux的时候，把react-redux一起安装

redux-thunk：redux处理异步操作的一个中间键

npm install redux react-redux 
yarn add redux react-reduxnpm install redux-thunk
yarn add redux-thunk

二、创建一个store文件，里面写入

使用redux提供的legacy_createStore方法创建一个store对象

import { legacy_createStore,applyMiddleware } from 'redux'
//redux-thunk 处理redux异步的
import reduxThunk from "redux-thunk"const defState = {count: 100
}
const reducer = (state = defState, action) => {state = JSON.parse(JSON.stringify(state))switch (action.type) {case 'add':state.count += action.pyload;break;}return state
}
// 创建store对象，createStore方法需要一个reducer函数
const store = legacy_createStore(reducer,applyMiddleware(reduxThunk))
export default store;

三、配置至全局

这边我用组件的形式书写，项目中一般是写在配置文件的 index.jsx 根目录文件的

使用react-redux提供的Provider组件全局提供数据

import React from "react";
import store from "./store.js";
import Child from "./Child";
import { Provider } from "react-redux";export default function App() {return (// Provider 需要一个store属性，这个store属性就是我们的store对象App);
}

 四、获取和修改数据

在Provider包着的后代组件里面使用 userSelector 和 useDisaptch 对store里面的数据进行操作

import React from "react";
import { useDispatch, useSelector } from "react-redux";
export default function Child() {// useSelector方法可以根据一个函数得到state里面的数据const count = useSelector((state) => state.count);// dispatch 是一个函数，用来触发 在 recuder 里面的 action 来操作数据const dispatch = useDispatch();// redux 同步写法const changeNum = () => {dispatch({type:"add",pyload:2})}// redux 异步写法const changeNum2 = () => {dispatch((dis) => {setTimeout(() => {dis({ type: "add", pyload:10})console.log("执行了异步redux");}, 1000)})}return (Child{count}{/* 直接调用 dispatch 触发 reducer 里面对应的 action */}{/* dispatch({ type: "add", pyload: 2 })}>Add*/}同步按钮 异步按钮);
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！