I'm having trouble with the view not rendering after state change to the store.
I can see with the logging middleware that the actions are called properly and that the store's state has the new values. If I navigate to another page with react-router, then come back, the users are properly displayed from the store, so I know that mapStateToProps is working.
MyComponent
const mapStateToProps = (state) => {
return {
users: state.users.all
};
};
const actionCreators = {
fetchUsers
};
export class Users extends React.Component<UsersProps, UsersState> {
constructor(props) {
super(props);
this.state = {
// initial values
};
}
componentDidMount() {
this.props.fetchUsers();
}
render() {
// return PrimeReact DataTable with users prop
}
}
export default compose(
withRouter,
connect(mapStateToProps, actionCreators),
injectIntl,
)(Users);
Actions
export function fetchUsers() {
return async dispatch => {
const users = await new UserService().users();
return dispatch(receiveUsers(users));
};
}
function receiveUsers(users: User[]) {
return { users, type: RECEIVE_USERS };
}
Reducer
export default combineReducers({
users
});
function users(state, action) {
switch (action.type) {
case RECEIVE_USERS:
return {
...state,
all: action.users,
};
default:
return state;
}
}
Store
export default function configureStore(preloadedState) {
const middlewares = [
loggerMiddleware,
thunkMiddleware,
];
const middlewareEnhancer = applyMiddleware(...middlewares);
const store = createStore(reducer, middlewareEnhancer);
return store;
}
