React-Redux初步了解

引入

import { createStore } from 'redux';

redux工作流

action： 用来给store描述操作类型的变量，格式如下：

{
  type: 'add',
  // 可以有其他类型，但是type必须存在
}

dispatch：使用dispatch(action)向store传递action，然后store会把action连同state（也就是要更改的公共状态）传入到reducer中作处理。

render：render为一个纯函数，接收旧的 state 和 action，读取action.type明确处理类型，处理完毕后返回新的 state作为新的状态记录到store上。

const render = (state, action) => {
   switch (action.type) {
     case 'add':
       return state + 1
     default:
       return state
   }
}

subscribe：订阅listener，通过subscribe(listener)添加一个变化监听器。每当 dispatch(action) 的时候就会执行，state中的一部分可能已经变化。你可以在回调函数里调用 getState() 来拿到当前 state。

store.subscribe(() => console.log(store.getState()))

实例

点击按钮+-数字进行加减

1.渲染页面按钮

// index.jsx文件
import React from 'react';
import { ADD_NUMBER, SUB_NUMBER } from '../store/action/number';
import store from '../store';

const AddButton = () => {
    return (
        <>
          <button onClick={() => store.dispatch(ADD_NUMBER)}>+</button>
          <span>{ store.getState() }</span>
          <button onClick={() => store.dispatch(SUB_NUMBER)}>-</button>
        </>
    )
}
export default AddButton;

2.action文件

export const ADD_NUMBER = {
    type: 'ADD',
}

export const SUB_NUMBER = {
    type: 'SUB',
}

 3.reducer文件

const renderReducer = (state = 0, action) => {
    switch (action.type) {
        case 'ADD':
            return state + 1
        case 'SUB':
            return state - 1
        default:
            return state;
    }
}

export default renderReducer;

 会发现一个问题页面上的数据不会变化但是点击后的state是变化了的

 

这是因为没有触发状态改变，可以使用hooks的userReducer或者useState和subscribe来监听和更改状态

使用useState和subscribe

将index.jsx改为

import React from 'react';
import { ADD_NUMBER, SUB_NUMBER } from '../store/action/number';
import store from '../store';

const AddButton = (props) => {
    // 增加useState和subscribe
    const [count, setCount] = React.useState(0);
    React.useEffect(() => {
        store.subscribe(() => {
            setCount(store.getState());
        })
    }, [])
    return (
        <>
          <button onClick={() => store.dispatch(ADD_NUMBER)}>+</button>
          <span>{ count }</span>
          <button onClick={() => store.dispatch(SUB_NUMBER)}>-</button>
        </>
    )
}
export default AddButton;