理解从零开始实现 useReducer
import { useState } from 'react';
export function useReducer(reducer, initialState) {
const [state, setState] = useState(initialState);
function dispatch(action) {
const nextState = reducer(state, action);
setState(nextState);
}
return [state, dispatch];
}
首先由官方文档易得出:
主函数中使用useReducer方法,返回dispatch函数和新的state状态
const [state, dispatch] = useReducer(messengerReducer, initialState);
JSX中使用dispatch()函数传入action动作对象时,是传递给自己编写的迁移状态逻辑函数(reducer)中
onChange={(e) => {
dispatch({
type: 'edited_message',
message: e.target.value,
});
}
相应的自行编写状态迁移逻辑函数(reducer即此处的messengerReducer)部分
export function messengerReducer(state, action) {
switch (action.type) {
case 'edited_message': {
return {
...state,
messages: {
...state.messages,
[state.selectedId]: action.message,
},
};
}
default: {
throw Error('未知 action:' + action.type);
}
}
}
因此reducer(即此处的messengerReducer)返回的是新的state,在实现useReducer时,可以分三块进行:
- useReducer函数需要调用useState这个Hook:
import { useState } from 'react';
export function useReducer(reducer, initialState) {
const [state, setState] = useState(initialState);
return [state, dispatch];
}
2.dispatch用于传入动作action对象,以触发状态迁移逻辑函数来更新渲染组件,则dispatch为其中的一个函数
import { useState } from 'react';
export function useReducer(reducer, initialState) {
const [state, setState] = useState(initialState);
function dispatch(action) {
}
return [state, dispatch];
}
3.由reducer函数可知,action由dispatch给reducer使用,最后返回新的state状态,所以dispatch内部实现需要将action对象参数传递给reducer函数,并将返回的新状态(nextState)设置更新渲染:
import { useState } from 'react';
export function useReducer(reducer, initialState) {
const [state, setState] = useState(initialState);
function dispatch(action) {
const nextState = reducer(state, action);
setState(nextState);
}
return [state, dispatch];
}
最后完成实现!
由于对官方文档中本节理解有些别扭,所以记录一下理解过程方便回顾,如果有更好的理解角度,欢迎在评论区赐教!