Reactjs Redux-组合多个还原程序可导致状态清除

对于redux来说是相当新的，并且已经通过了官方指南。现在我想独自做点什么。我有两个减速器，正在使用react thunk。当我在第一个操作之后发送一个操作时，它会清除我的另一个reducer集合。为了说明我的意思，我有：

Actions.js

import axios from 'axios';

function fetchAtms() {
  return axios.get('http://localhost:4567');
}

export const recievedAtms = (atms) => {
  return {
    type: 'RECIEVED_ATMS',
    atms
  }
}

export const completed = () => {
  return {
    type: 'COMPLETED',
  }
}

export const loadMore = () => {
  return {
    type: 'LOAD_MORE',
  }
}

export const loadAtms = (forPerson) => {
  return function (dispatch) {
    return fetchAtms().then((response) => {
      let atms = response.data.map((item) => {return item['location']})
      dispatch(recievedAtms(atms));
      // When dispatch(completed()); is called
      // it is clears my app collection.
      dispatch(completed());
      // $r.store.getState() => Object {app: {atms: []}, isLoading: false, router: Object}
    }, (error) => {
        console.log('implement me');
    })
  }
}

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

const app = (state = {}, action) => {
  switch (action.type) {
    case 'RECIEVED_ATMS':
      return {
        atms: action.atms
      }
    default:
      return {};
  }
}

const isLoading = (state = true, action) => {
  switch (action.type) {
    case 'COMPLETED':
      return !state;
    default:
      return state;
  }
}

const appReducer = combineReducers({
  app,
  isLoading,
  router: routerReducer
});

export default appReducer;

import { createStore, applyMiddleware } from 'redux';
import { routerMiddleware} from 'react-router-redux';
import createHistory from 'history/createBrowserHistory';
import thunk from 'redux-thunk';

import appReducer from './reducers/app';

export const history = createHistory()

const middleware = routerMiddleware(history);

const store = createStore(appReducer, applyMiddleware(middleware, thunk));

export default store;

减速器

import axios from 'axios';

function fetchAtms() {
  return axios.get('http://localhost:4567');
}

export const recievedAtms = (atms) => {
  return {
    type: 'RECIEVED_ATMS',
    atms
  }
}

export const completed = () => {
  return {
    type: 'COMPLETED',
  }
}

export const loadMore = () => {
  return {
    type: 'LOAD_MORE',
  }
}

export const loadAtms = (forPerson) => {
  return function (dispatch) {
    return fetchAtms().then((response) => {
      let atms = response.data.map((item) => {return item['location']})
      dispatch(recievedAtms(atms));
      // When dispatch(completed()); is called
      // it is clears my app collection.
      dispatch(completed());
      // $r.store.getState() => Object {app: {atms: []}, isLoading: false, router: Object}
    }, (error) => {
        console.log('implement me');
    })
  }
}

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

const app = (state = {}, action) => {
  switch (action.type) {
    case 'RECIEVED_ATMS':
      return {
        atms: action.atms
      }
    default:
      return {};
  }
}

const isLoading = (state = true, action) => {
  switch (action.type) {
    case 'COMPLETED':
      return !state;
    default:
      return state;
  }
}

const appReducer = combineReducers({
  app,
  isLoading,
  router: routerReducer
});

export default appReducer;

import { createStore, applyMiddleware } from 'redux';
import { routerMiddleware} from 'react-router-redux';
import createHistory from 'history/createBrowserHistory';
import thunk from 'redux-thunk';

import appReducer from './reducers/app';

export const history = createHistory()

const middleware = routerMiddleware(history);

const store = createStore(appReducer, applyMiddleware(middleware, thunk));

export default store;

Store.js

import axios from 'axios';

function fetchAtms() {
  return axios.get('http://localhost:4567');
}

export const recievedAtms = (atms) => {
  return {
    type: 'RECIEVED_ATMS',
    atms
  }
}

export const completed = () => {
  return {
    type: 'COMPLETED',
  }
}

export const loadMore = () => {
  return {
    type: 'LOAD_MORE',
  }
}

export const loadAtms = (forPerson) => {
  return function (dispatch) {
    return fetchAtms().then((response) => {
      let atms = response.data.map((item) => {return item['location']})
      dispatch(recievedAtms(atms));
      // When dispatch(completed()); is called
      // it is clears my app collection.
      dispatch(completed());
      // $r.store.getState() => Object {app: {atms: []}, isLoading: false, router: Object}
    }, (error) => {
        console.log('implement me');
    })
  }
}

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

const app = (state = {}, action) => {
  switch (action.type) {
    case 'RECIEVED_ATMS':
      return {
        atms: action.atms
      }
    default:
      return {};
  }
}

const isLoading = (state = true, action) => {
  switch (action.type) {
    case 'COMPLETED':
      return !state;
    default:
      return state;
  }
}

const appReducer = combineReducers({
  app,
  isLoading,
  router: routerReducer
});

export default appReducer;

import { createStore, applyMiddleware } from 'redux';
import { routerMiddleware} from 'react-router-redux';
import createHistory from 'history/createBrowserHistory';
import thunk from 'redux-thunk';

import appReducer from './reducers/app';

export const history = createHistory()

const middleware = routerMiddleware(history);

const store = createStore(appReducer, applyMiddleware(middleware, thunk));

export default store;

如果您在

Actions.js

中的

loadAtms

功能I中磨练：

把我的自动取款机拿来

发送接收数据

发送完成

当我分派

completed（）

时，它会清除我的ATM收款。我不完全确定。我不希望这样，因为两个减速器之间的状态是分开的。我的期望是：

在我启动

completed（）

后，我不希望它清除我收集的ATM。调用

completed（）

后的结果状态应如下所示：

{
  isLoading: false,
  app: {atms: [{id: 1}, {id: 2}, {id: 3}]}
}

目前发生的情况是：

{isLoading: false, app: {}} 

---

任何关于我在这里做错了什么的想法

如果您的自动取款机减速机不是它正在寻找的操作，那么它将返回

{}

。相反，您应该返回

状态

，我相信。因此：

const app = (state = {}, action) => {
  switch (action.type) {
    case 'RECIEVED_ATMS':
      return {
        atms: action.atms
      }
    default:
      return state;
  }
}