redux

redux步骤

1. createStore 创建store

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

3. getState 获取状态值

4. dispatch 提交更新

5. subscribe 变更订阅

创建store，src/store/ReduxStore.js

import {createStore} from 'redux'

const counterReducer = (state = 0, action) =>{
    console.log('state',state);
    switch(action.type){
        case 'ADD':
            return state + 1;
        case 'SUB':
            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 class ReduxPage extends Component {
    componentDidMount() {
        //store更新
        //如果点击按钮 能 新，因为没有订阅(subscribe)状态变更
        store.subscribe(() => {
            console.log("subscribe");
            this.forceUpdate();
        });
    }
    add = () =>{
        store.dispatch({type:"ADD"})
    }
    sub = () => {
        store.dispatch({type:"SUB"})
    }
    render() {
        console.log("store", store);
        return (
            <div>
                <div>redux</div>
                <button onClick={this.add}>add</button>
                <button onClick={this.sub}>sub</button>
                <div>{store.getState()}</div>
            </div>
        )
    }
}

export default ReduxPage

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

import store from './store/ReduxStore';

const render = () => {
  ReactDOM.render(
    // <React.StrictMode>
      <App />,
    // </React.StrictMode>,
    document.getElementById('root')
  );
}
render()
store.subscribe(render)