a React-Redux Action Update Multiple Reducers

问题

How an Action update multiple different Reducers? How can i implement like this?

UPDATE:

this is my action in ./actions/sync.js. this action connected to an external API and call from Sync Component, periodically.

export function syncFetch(response) {
    return {
        type: 'SYNC_FETCH',
        response
    }
}

export function syncFetchData(url) {
    return (dispatch) => {
        fetch(url)
            .then((response) => {
                if (!response.ok) {
                    throw Error(response.statusText);
                }

                return response;
            })
            .then((response) => response.json())
            .then((sync) => updateAll(sync))
            .catch(() => console.log('error'));          
    };
}

const updateAll = (params) => {
    return dispatch => {
        dispatch({type: 'SYNC_FETCH', payload: params})
    }
}

and ./reducers/sync.js

const initialState = [];

export default (state = initialState, action) => {
    switch(action.type) {
        case 'SYNC_FETCH':
            return action.response;

        default:
            return state;
    }
}

i got not error, but data not update. what is problem in my code?

回答1:

each action is being dispatched to all the reducers, the reducers may decide whether they wish to use the action to update something or not

What you want is to

const updateAll = params => {
    return {type: 'UPDATE_PARAMS', payload: params}
}

and then use it in different reducers like

const newReducer = (state= initialState, action) => {
   switch(action.type) {
      case 'UPDATE_PARAMS': return {
         ...state,
         // do some things here
      }
      ...
      default: return state;
   }
}

const userReducer = (state= initialState, action) => {
   switch(action.type) {
      case 'UPDATE_PARAMS': return {
         ...state,
         // do some things here
      }
      ...
      default: return state
   }
}

回答2:

One way of doing this could be to fire batched actions. So you can have three different actions, one per reducer, and have a main action that takes care of all these three subsequently (or just add two actions under the first one). This can be done by using thunks (thunk middleware). To do something like, assuming they're async:

const updateAllNewsStuff = newsParam => {
  return dispatch => {
    dispatch(newsAction(newsParam))
    dispatch(userAction(newsParam))
    dispatch(notifyAction(newsParam))
  }
}

You could probably also look at this plugin to fire batched actions: https://github.com/tshelburne/redux-batched-actions

回答3:

From react-redux 7.1, you can leverage the batch API to dispatch all the actions on a single re-render. From the docs you can do something like:

import { batch } from 'react-redux'

function myThunk() {
  return (dispatch, getState) => {
    // should only result in one combined re-render, not two
    batch(() => {
       dispatch(newsAction(newsParam))
       dispatch(userAction(newsParam))
       dispatch(notifyAction(newsParam))
    })
  }
}

来源：https://stackoverflow.com/questions/48880469/a-react-redux-action-update-multiple-reducers

标签

reactjs

redux