redux 基本使用

发布于 2022-05-31  637 次阅读


一般来说,在redux文件夹下有四个文件,其中三个分别对应着 ActionCreators、Store、Reducers

这里面的 constant.js 存放着各种的type值,目的是为了防止打错单词

首先,在store.js中创建Reducer

import {createStore,applyMiddleware} from "redux";
import countReducer from './count_reducer'
import thunk from "redux-thunk";
export default createStore(countReducer,applyMiddleware(thunk))

以上三步分别是:引入createStore; 引入暴露的纯函数(Reducer); 暴露创建后的Reducer

Reducer文件中是一个纯函数,这个函数有两个形参,第一个形参是之前的状态(形参默认值为0),第二个是行为对象,行为对象中包含type(操作名称)和data(数据),这个函数必须有返回值

求和案例中的 reducer

这个countRecuder函数第一次会被store自动调用并且给preState初始化

在 actionCreator 中,暴露函数,函数返回一个对象,对象里是type和data,也就是action对象

在使用redux时候,我们可以使用 store.getState() 方法,来获取状态,这个状态的类型和值取决于Reducer中返回的类型和值

使用 store.dispatch(action_fun(data)) 来操作reducer更新redux里的状态

redux和react本质上没啥关系,所以redux的状态更新并不会像react一样调用render函数重新渲染

所以,我们使用 store.subscribe(()=>{this.setState({})}) 这种方式来在更新状态后重新渲染

届ける言葉を今は育ててる
最后更新于 2022-06-01