react 学习之redux使用方法

react 学习之redux使用方法

1 . 什么是redux

redux 是 JavaScript应⽤的状态容器,提供可预测化的状态管理。它保证程序⾏为⼀致性且易于测试。

 

2. redux安装

npm install redux --save

3. redux使用小案例(累加器)

使用步骤:

  1. 需要⼀个store来存储数据
  2. store⾥的reducer初始化state并定义state修改规则
  3. 通过dispatch⼀个action来提交对数据的修改
  4. action提交到reducer函数⾥,根据传⼊的action的type,返回新的state

第一步:创建store,src/store/index.js

import {createStore} from 'redux'

//reducer初始化state并定义state修改规则
const counterReducer = (state = 0, action) => {
    switch (action.type) {
        case 'ADD':
            return state + 1
        case 'MINUS':
            return state - 1
        default:return state
    }
}
const store = createStore(counterReducer)
export default store

第二步:page获取store数据

import React, { Component } from "react";
import store from "../store/ReduxStore";

export default class ReduxPage extends Component {
    componentDidMount() {
        //订阅(subscribe)状态变更
        store.subscribe(() => {
            console.log("subscribe");
            this.forceUpdate();
            //this.setState({});
        });
    }
    add = () => {
        store.dispatch({ type: "ADD" });
    };
    minus = () => {
        store.dispatch({ type: "MINUS" });
    };
    render() {
        console.log("store", store);
        return (
            <div> 
                <h3>ReduxPage</h3> 
                <p>{store.getState()}</p> 
                <button onClick={this.add}>add</button> 
                <button onClick={this.minus}>minus</button>
            </div>
        );
    }
}

完成以上步骤就利用redux实现了一个简单的累加器。更多的使用方法请查看官方文档。

未经允许不得转载:小月博客 » react 学习之redux使用方法
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(1) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏