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可以正确访问状态。 如果您希望在满足特定条件时调用某些内容，则可以添加一些安全防护。

如果要跨组件访问化简器，则可以使用Context API存储化简器。 请看下面的例子。 您可以看到将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.不使用应用程序上下文的本地化简示例

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