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-redux

npm 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对象
    <Provider store={store}>
      <div>App</div>
      <Child />
    </Provider>
  );
}

四、获取和修改数据

在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 (
    <div>
      <div>Child</div>
      <div>{count}</div>
      {/* 直接调用 dispatch 触发 reducer 里面对应的 action */}
      {/*<button onClick={() => dispatch({ type: "add", pyload: 2 })}>Add</button>*/}
     <button onClick={changeNum}>同步按钮</button> 
     <button onClick={changeNum2}>异步按钮</button>
    </div>
  );
}

Redux的使用（含Thunk的使用）

猜你喜欢