如何在React中使用Redux

使用前请先下载redux-devtools,这个插件可以让我们在浏览器中看到redux状态。
「firefox_2」https://www.aliyundrive.com/s/2k4ieQWNxFU 提取码: bk71
点击链接保存,或者复制本段内容,打开「阿里云盘」APP ,无需下载极速在线查看,视频原画倍速播放。
image.png

然后需要在reudx中继承devtools的中间件;

import { createStore, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';

import reducer from './reducer.js';

// composeEnhancers函数
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({trace: true}) || compose;

// 应用一些中间件
// 1.引入thunkMiddleware中间件(上面)

const storeEnhancer = applyMiddleware(thunkMiddleware);
const store = createStore(reducer, composeEnhancers(storeEnhancer));


export default store;


安装react-redux
yarn add react-redux

  1. 首先你需要有个在根组件外面套一个react-redux提供的方法,将store传递进去。
    image.png
  2. 然后通过useSelector函数返回的值来获取到store当中的值,useDispatch非常简单,就是直接获取dispatch函数,之后在组件中直接使用即可,我们还可以通过useStore来获取当前的store对象。
    image.png

文件规格

你可以尝试在代码文件中这样来管理组件的reudx文件
image.png

  1. actionCreators(要派发action)
    image.png
  2. constants(type名称)
    image.png
  3. index(导出的reducer)
    image.png
  4. reducer(导出新的stroe)
    image.png

我们只需要在组件中派发我们的action 就能从useSelector中获取到我们想要值

Q.E.D.