引入
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;