React-Redux，如何在呈现新组件之前设置全局状态？

在React-Redux中，可以使用Redux的store来设置全局状态。在呈现新组件之前，可以通过Redux的dispatch方法来派发一个action，从而更新全局状态。

首先，需要创建一个Redux的store，可以使用createStore方法来创建。在创建store时，需要传入一个reducer函数，用于处理不同的action，并更新全局状态。reducer函数会接收当前的状态和派发的action作为参数，并返回更新后的状态。

接下来，在组件中使用Redux的connect方法来连接store和组件。通过connect方法，可以将全局状态中的某些属性映射到组件的props中，以便在组件中使用。同时，也可以将派发action的方法映射到组件的props中，以便在组件中触发状态更新。

当需要在呈现新组件之前设置全局状态时，可以在组件的生命周期方法中调用派发action的方法，从而更新全局状态。例如，在componentDidMount方法中调用派发action的方法，可以在组件挂载完成后设置全局状态。

下面是一个示例代码：

// 定义action类型
const SET_GLOBAL_STATE = 'SET_GLOBAL_STATE';

// 定义action创建函数
const setGlobalState = (newState) => ({
  type: SET_GLOBAL_STATE,
  payload: newState
});

// 定义reducer函数
const reducer = (state = {}, action) => {
  switch (action.type) {
    case SET_GLOBAL_STATE:
      return { ...state, ...action.payload };
    default:
      return state;
  }
};

// 创建store
const store = createStore(reducer);

// 定义组件
class MyComponent extends React.Component {
  componentDidMount() {
    // 在组件挂载完成后设置全局状态
    this.props.setGlobalState({ isLoggedIn: true });
  }

  render() {
    // 使用全局状态中的属性
    const { isLoggedIn } = this.props;

    return (
      <div>
        {isLoggedIn ? '已登录' : '未登录'}
      </div>
    );
  }
}

// 将全局状态映射到组件的props中
const mapStateToProps = (state) => ({
  isLoggedIn: state.isLoggedIn
});

// 将派发action的方法映射到组件的props中
const mapDispatchToProps = (dispatch) => ({
  setGlobalState: (newState) => dispatch(setGlobalState(newState))
});

// 使用connect方法连接store和组件
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(MyComponent);

// 渲染组件
ReactDOM.render(
  <Provider store={store}>
    <ConnectedComponent />
  </Provider>,
  document.getElementById('root')
);

在上述示例中，首先定义了一个action类型SET_GLOBAL_STATE和对应的action创建函数setGlobalState。然后，定义了reducer函数来处理该action，并更新全局状态。

接着，创建了一个Redux的store，并将reducer传入。然后，定义了一个组件MyComponent，在componentDidMount方法中调用了派发action的方法setGlobalState，从而在组件挂载完成后设置全局状态。

最后，使用connect方法将全局状态中的isLoggedIn属性映射到组件的props中，并将派发action的方法setGlobalState映射到props中。最终，通过Provider组件将store传递给应用的根组件，并渲染根组件。

这样，在呈现新组件之前，全局状态中的isLoggedIn属性会被设置为true，并在组件中进行渲染。当全局状态更新时，组件会自动重新渲染以反映最新的状态。

腾讯云相关产品和产品介绍链接地址：