Update reduxAsyncConnect state

[kastsiushkin]

I have a question and basically looking for some suggestions on how to handle this situation, not sure if redux-connect is suitable.

1. Load data and populate dropdown in header, setting first option as selected
2. redux-connect loads data using id as param from the dropdown
3. User changes dropdown option
4. Fetch new data and update the view

What would be a good approach to implement this behavior? Ideally would be to rerun redux-connect as if user just got to the page, is it possible?

Thank you for any suggestions!

[dlakata]

Perhaps something like this:

const mapStateToProps = (state) => {
  return {
    options: state.options,
    data: state.selectedData
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    fetchData: (id) => {
      return dispatch(fetchData(id));
    }
  };
};

@asyncConnect([{
    promise: ({store: {dispatch}) => {
      // loadInitialView dispatches calls for all option ids and data for first option
      return dispatch(loadInitialView());
    }
  }],
  mapStateToProps,
  mapDispatchToProps
)
export default class View extends React.Component {
  render() {
    const {options, data, fetchData} = this.props;
    return (
      <div>
        <select onChange={/* call fetchData */}>
        {options.map((option) => {
          return <option value={option.id}>{option.text}</option>
        })}
        </select>
        <div>{data}</div>
      </div>
    );
  }
}

[kastsiushkin]

Thank you for your help!

ReduxAsyncConnect will store data in reduxAsyncConnect.:key, then I have selectors that expose data to the components. Can fetchData function replace data at reduxAsyncConnect.:key?

As another example, think of anything on the page that requires to refetch the data with new params from the server and update the view.

Thank you!

[dlakata]

I might be wrong, but I don't think you can/should modify data in the reduxAsyncConnect key in the redux store, since it's managed by redux-connect's reducer. You should only read from that part of the store if you need information on the state of loading. ReduxAsyncConnect only tries to solve the problem of delaying rendering until promises are resolved/rejected. State management is a problem for just redux.

So in the above code,

1. loadInitialView() returns a promise so that ReduxAsyncConnect waits to render until it's finished. It dispatches actions like LOAD_ALL_OPTIONS, and then LOAD_SELECTED_DATA on the first of those options. Your reducers receive these actions and update the options and selectedData parts of the store. These parts of the state are mapped to the options and data props of View.
2. When a new option is selected, fetchData is called with its id, which dispatches LOAD_SELECTED_DATA. The same process occurs, resulting in the new state being rendered.
3. If anything else on the page triggers a refetch, it can do so through redux actions, and the state should be mapped to props. This way, only the necessary data is refetched and re-renders are localized to the appropriate views.

[AVVS]

@dlakata is right, ideally you don't want to work with the state in the reduxAsyncConnect and in the future I would like to make a breaking change where we can completely remove any actual state saved to the reduxAsyncConnect except for boolean flags on loaded/unloaded keys & fixed filtering