How to add new state to the Redux store?

I am new to this project, and I am enjoying reading the code. But I am having a hard time figuring out how to add my app’s (new) state to the store.

The specifics of my app is that my server.js code will receive data asynchronously from some other server, which needs to be reflected in the GUI.

My understanding of the Redux pattern is that my server code should create actions for each newly-arrived bit of information and then dispatch them to the store. The update in the store then propagates to the React containers/components that rely on it.

I realize that this might be more of a Redux question, but I would love to see an outline of steps for the following in react-redux-universal-hot-example:

1. Extending the ‘schema’ of the store with a new kind of information. (I’m not sure how to ensure that my new state data won’t conflict with existing info in the store);
2. Creating actions (I think that’s straightforward - simply make a new object with { type: xxx, ... })
3. Hooking those actions into the dispatch() method. (I see the @asyncConnect() and @ connect() methods, but don’t entirely understand what they do.)
4. and whatever else needs to happen…

Thanks!

[tearsofphoenix]

Add new state is simple! Just write your own state file under redux/modules/, here is part of mine schedule.js:

// define constants for different actions
const UPDATE = 'uhs/schedule/UPDATE';
const UPDATE_SUCCESS = 'uhs/schedule/UPDATE_SUCCESS';
const UPDATE_FAIL = 'uhs/schedule/UPDATE_FAIL';

const SEARCH = 'uhs/schedule/SEARCH';
const SEARCH_SUCCESS = 'uhs/schedule/SEARCH_SUCCESS';
const SEARCH_FAIL = 'uhs/schedule/SEARCH_FAIL';

// initial state object, your may put more initial object here if needed
const initialState = {
  loading: false
};

// this will be used to `dispatch` actions, each `case` condition deal a kind of `action`
export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case UPDATE:
    case SEARCH:
      return {
        ...state,
        loading: true
      };
    case UPDATE_SUCCESS:
      return {
        ...state,
        loading: false
      };
    case SEARCH_SUCCESS:
      return {
        ...state,
        loading: false,
        searchResult: action.result.data
      };
    case UPDATE_FAIL:
    case SEARCH_FAIL:
      return {
        ...state,
        loading: false,
        error: action.result.error
      };
    default:
      return state;
  }
}
// internal actions here
function _updateSchedule(data) {
  return {
    types: [UPDATE, UPDATE_SUCCESS, UPDATE_FAIL],
    promise: (client) => client.post('/schedule/update', {data})
  };
}

// this show how to `dispatch` sequential actions, See `clientMiddleware.js`
export function updateSchedule(data, callback) {
  return (dispatch) => {
    dispatch(_updateSchedule(data))
      .then(callback);
  };
}
// your action here, if it may have multiple `type` of result, use `types` field;
// note `post` (`data`) & `get` (`params`) has different arguments. See `clientMiddleware.js` under `redux/middleware` for detail
export function searchSchedule(params) {
  return {
    types: [SEARCH, SEARCH_SUCCESS, SEARCH_FAIL],
    promise: (client) => client.get('/schedule/search', {params}),
  };
}

@richb-hanover

[fabienheureux]

@tearsofphoenix Your suggestion worked perfectly for me as well. That kind of answer really rocks 🤘