useReducer 未同步更新状态的问题

根据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.我如何根据最新更新的状态（调度 redux 操作）做一些事情（["1.1"]并不是[]) ?

Use useEffect正确访问状态。如果您想要在满足某个条件时调用某些内容，您可以添加一些保护措施。

如果你想跨组件访问你的reducer，你可以使用Context API来存储reducer。请看下面的示例。您可以看到reducer 被注入到父组件的Context 中，然后两个子组件a) 调度一个action b) 接收来自该action 的更新。

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"})
}}/>