Redux

Question

我有一个应用程序，它为我提供有关请求静态文件的用户详细信息（所以在一开始 - 我不必登录）。我尝试使用异步操作来初始化状态，检查用户是否有权查看该应用程序。但是我的 Auth 组件，它的应用程序作为 child 在更改的道具上没有 re-render。店铺：

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
);

所以应用程序只停留在 "Access denied" 上，因为用户 object 是空的。更重要的是 - 当获取数据时， 'user' 道具有另一个嵌套的 'user' object 然后有数据。我想检查用户是否不为空（并修复嵌套的双用户 object）。但我不知道为什么更改后的道具不 re-render 授权应用程序。可能是什么原因？难道初始化状态的时候不能做异步动作吗？

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;
};

如果你想要初始用户，我给你举个例子。

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 - 使用异步调度初始化状态

Redux - initializing the state with async dispatch

javascript

reactjs

redux-thunk