Redux

Question

对 redux 还很陌生，已经阅读了官方指南。现在我正在尝试单独做一些事情。我有两个减速器并且正在使用 react-thunk。当我在第一个动作之后发送一个动作时，它会清除我的 collection 我的另一个减速器。为了说明我的意思，我有：

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;

Store.js

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:

获取我的自动取款机
调度收到Atms
派送完成

当我发送 completed() 时，它清除了我的 atms collection。我不完全确定。我不希望因为两个减速器之间的状态是分开的。我的期望是：

在我解雇 completed() 之后，我不希望它清除我的 collection 自动提款机。调用 completed() 后的结果状态应如下所示：

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

目前发生的事情是这样的：

{isLoading: false, app: {}}

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

Answer 1

如果操作不是它正在寻找的操作，您的 atms reducer 将返回 {}。相反，我相信你应该返回 state。所以：

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

Redux - 组合多个减速器导致状态清除

Redux - Combining multiple reducers result in state clearing

reactjs

redux-thunk