使用 React+Redux 从数据库中设置 initialState 值

Question

I tried to set input value in redux form and I figure out that my state don't have user values. Just the default one that inserted like that:

import { Map, fromJS } from 'immutable';
import { INIT } from '../../actions/actionConstants';

const initialState = {
  usersLogin: Map(
      {
    id: '',
    name : 'test',
    email: 'test01@gmail.com',
    password: 'test',
    remember: true
  }

  )
};
const initialImmutableState = fromJS(initialState);
export default function reducer(state = initialImmutableState, action = {}) {
  switch (action.type) {
    case INIT:
      return state;
    default:
      return state;
  }
}

How I am able to get in const all user values that are in the database?

Answer 1

Same way as anything else, but you'll need it to be synchronous if implemented as your snippet.

FWIW, I almost always have the DB state load async, because DB calls can fail. I always have a hard-coded fallback then set the state once the DB (or API/etc) async call completes.

Also, in general, general "app user" stuff I keep fairly high up in the store since it's required almost everywhere, so on login/etc. I set it and by the time it's needed anywhere it's pretty much always available--but in the event of an async failure the fallback is always required.

(Unrelated, but there's no reason to have separate cases in this... uh... case.)

Answer 2

You need to do couple of things here

1- You need to write an action creator which does this API fetching for you and then dispatch an action with the API response let's say SET_DB_VALUES

2- Then you need to dispatch this action, you can do it in the componentDidMount of your Redux root element (the one that is wrapped by Provider and receives the store)

3- Change your reducer to listen to this action like

switch (action.type) {
case INIT:
  return state;
case SET_DB_VALUES:
  return {
     ...state,
     action.payload
  }
default:
  return state;

}

Note: You will need to use some middleware to do asynchronous calling in action creator, You can use Thunk,

Hope it helps you starting