redux入门

1、redux

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

2、是否需要redux

Redux 是负责组织 state 的⼯工具，但你也要考虑它是否适合你的情况。不不要因为有⼈人告诉你要⽤用 Redux 就去⽤用，花点时间好好想想使⽤用了了 Redux 会带来的好处或坏处。

3、什么场景需要

(1) 你有着相当⼤大量量的、随时间变化的数据;
(2) 你的 state 需要有⼀个单一可靠数据来源;
(3) 你觉得把所有 state 放在最顶层组件中已经⽆无法满⾜足需要了了。
(4) 某个组件的状态需要共享。

4、Redux Flow

image.png

5、 store/index.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

6、UsePage（class comp）

import React, { Component } from "react";
import store from "../store/index";
export default class UsePage extends Component {
  componentDidMount() {
    store.subscribe(() => {
      console.log("subscribe");
      this.forceUpdate();
      //this.setState({});
}); }
  add = () => {
    store.dispatch({ type: "ADD" });
  };
  minus = () => {
    store.dispatch({ type: "MINUS" });
  };
  render() {
    return (
      <div>
        <h3>ReduxPage</h3>
        <p>{store.getState()}</p>
        <button onClick={this.add}>add</button>
        <button onClick={this.minus}>minus</button>
      </div>
  );
 }
}

7、UsePage（function comp）

import React, { Component } from "react";
import store from "../store/index";
import {useState, useEffect} from 'react'

function UsePage() {
  const {getState, dispatch, subscribe} = store;
  const [refresh, setRefresh] = useState(false);

  useEffect(() => {
    refresh && setTimeout(() => setRefresh(false))
  }, [refresh])

  useEffect(()=>{
    subscribe(()=>{
      setRefresh(true)
    });
  },[subscribe])

  const add = () =>{
    dispatch({type: 'ADD'})
  }
  const minus = () =>{
    dispatch({type: 'MINUS'})
  }
  return (
    <div className="App">
      <p>{getState()}</p>
      <button onClick={add}>add</button>
      <button onClick={minus}>minus</button>
    </div>
  );
}
export default UsePage;

8、在src/index.js的render里订阅状态变更

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

9、重点掌握

(1) createStore 创建store
(2) reducer 初始化、修改状态函数
(3) getState 获取状态值
(4) dispatch 提交更更新
(5) subscribe 变更更订阅
(6) combineReducers 将多个reducer合并为一个reducer(本文未使用)