redux如何使⽤?

 

在下⾯的场景中，引⼊ Redux 是⽐较明智的：

1、你有着相当⼤量的、随时间变化的数据；

2、你的 state 需要有⼀个单⼀可靠数据来源；

3、你觉得把所有 state 放在最顶层组件中已经⽆法满⾜需要了。

4、某个组件的状态需要共享。

 

安装redux

npm install redux --save

⽤⼀个累加器举例

 

1. 需要⼀个 store 来存储数据

2. store ⾥的 reducer 初始化 state 并定义 state 修改规则

3. 通过 dispatch ⼀个 action 来提交对数据的修改

4. action 提交到 reducer 函数⾥，根据传⼊的 action 的 type ，返回新的 state

 

创建store，src/store/ReduxStore.js

import {createStore} from 'redux'
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

创建ReduxPage

import React, { Component } from "react";
import store from "../store/ReduxStore";
export default class ReduxPage extends Component {
 componentDidMount() {
   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>
   );
 }
}

还可以在 src/index.js 的 render ⾥订阅状态变更

import store from './store/ReduxStore'
const render = ()=>{
 ReactDom.render(
 <App/>,
 document.querySelector('#root')
 )
}
render()
store.subscribe(render)

1. createStore 创建 store

2. reducer 初始化、修改状态函数

3. getState 获取状态值

4. dispatch 提交更新

5. subscribe 变更订阅

 

原文：视频笔记