Question

我有一个应用程序，可为我提供有关请求静态文件的用户详细信息（因此一开始，我无需登录）。我尝试通过异步操作检查用户是否有权查看该应用程序来初始化状态。但是我的Auth组件（将应用作为儿童）不会在更改的道具上重新渲染。商店：

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

store.dispatch(fetchUser());

export default store;

在商店中，初始化时我调度了一个异步操作。

动作：

export const fetchUser = () => async dispatch => {
  const response = await axios.get('/api/user/information');

  dispatch({
    type: FETCH_USER,
    payload: response.data
  });
};

然后将动作传递给减速器：

减速器：

export const userReducer = (state = {}, action) => {
  switch (action.type) {
    case FETCH_USER:
      return { ...state, user: action.payload };
  }
  return state;
};

然后，将来自reducer的数据传递到Auth组件。

Auth组件：

class Auth extends Component {
  public render() {
    return this.props.user ? this.props.children : <p>Access denied</p>;
  }
}

export default compose(Connectable)(Auth);

道具从connectablr hoc传递过来。

和可连接的hoc：

const mapStateToProps = (state) => ({
  user: state.user
});

const mapDispatchToProps = {};

export const Connectable = connect(
  mapStateToProps,
  mapDispatchToProps
);

因为用户对象为空，所以应用程序仅停留在“拒绝访问”上。更重要的是-提取数据时，“用户”属性具有另一个嵌套的“用户”对象，然后有数据。我想检查用户是否不为空（并修复双重用户嵌套对象）。但是我不知道为什么更改后的道具不重新渲染auth应用。可能是什么原因？初始化状态时，是否无法执行异步操作？

Answer 1

将state.user更改为state.userReducer.user

const mapStateToProps = (state) => ({
  user: state.userReducer.user
});

您的减速器设计会更好。

https://egghead.io/courses/getting-started-with-redux

export const userReducer = (state = {}, action) => {
  switch (action.type) {
    case FETCH_USER:
      return { ...state, user: action.payload };
  }
  return state;
};

如果您要使用init用户，请举个例子。

import * as actions from '../../actions';

const mapStateToProps = (state) => ({
  user: state.user
});

export const Connectable = connect(
  mapStateToProps,
  actions
);

和

class Auth extends Component {
 componentDidMount() {
     this.props.fetchUser()
 }
 render() {
    return this.props.user ? this.props.children : <p>Access denied</p>;
  }
}

export default compose(Connectable)(Auth);

Redux-使用异步调度初始化状态

1 个答案: