useReducer 不同步更新状态的问题

Question

根据React docs：

当你有复杂的情况时，useReducer 通常比 useState 更可取 涉及多个子值或下一个状态时的状态逻辑 取决于上一个。

1.有人能解释一下为什么useReducer 没有同步更新状态吗？

const reducer = (state, action) => {
    if( action.type === 'ADD_VALUE') {
        console.log(`STATE IN REDUCER`, [...state, action.path]) // => ["1.1"]
        return [...state, action.path]
    }   
}

const [state, dispatch] = useReducer(reducer, [])

<input type="button" onClick={() => {
    dispatch({ type: 'ADD_VALUE', path: "1.1"})
    console.log(`STATE`, state) // => []
    // here i want to do some stuff based on the lastest updated state (["1.1"] and not [])
    // for example dispatch an action with redux
}}/>

2.我怎样才能根据最新的更新状态（["1.1"] 而不是[]）做一些事情（发送redux 操作）？

Answer 1

使用useEffect 正确访问状态。如果你想在某个条件被满足时调用某些东西，你可以添加一些保护措施。

如果你想跨组件访问你的 reducer，你可以使用 Context API 来存储 reducer。看下面的例子。你可以看到 reducer 被注入到父组件的 Context 中，然后两个子组件 a) 分派一个动作 b) 从动作接收更新。

1.跨多个组件使用的上下文缩减器示例

import React from "react";
import ReactDOM from "react-dom";

const Application = React.createContext({
  state: null,
  dispatch: null
});

function ActionComponent() {
  const { dispatch } = React.useContext(Application);
  return (
      <div>
          <div>Action Component</div>
          <button onClick={() => dispatch("lol")}>Do something</button>
      </div>
  );
}

function ListenerComponent() {
  const { state } = React.useContext(Application);
  React.useEffect(
    () => {
      console.log(state);
    },
    [state]
  );
  return <div>Listener Component</div>;
}

function App() {
  const [state, dispatch] = React.useReducer(function(state = [], action) {
    return [...state, action];
  });
  return (
    <Application.Provider value={{ state, dispatch }}>
      <div className="App">
        <ActionComponent />
        <ListenerComponent />
      </div>
    </Application.Provider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

2。不使用 Application Context 的本地 reducer 示例

const reducer = (state, action) => {
    if( action.type === 'ADD_VALUE') {
        return [...state, action.path]
    }   
}

const [state, dispatch] = useReducer(reducer, [])

React.useEffect(() => {
    console.log(state);
}, [state]);

<input type="button" onClick={() => {
    dispatch({ type: 'ADD_VALUE', path: "1.1"})
}}/>