2017-06-04 35 views
1

对于redux而言是相当新颖的,并且已经通过了官方指南。现在我正在尝试独奏。我有两个减速器,并且正在使用反应速度。当我在第一个动作之后发送一个动作时,它清除了我的另一个减速器的集合。为了说明我的意思是我有:Redux - 结合多个减速器导致状态清除

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功能我:

  1. 取我的自动取款机
  2. 调度receivedAtms
  3. 调度完成

当我派遣completed()清楚我的大气压集合。我不完全确定。由于两位减员之间的状态是分开的,我不会期望这一点。我的期望是:

我开除后completed()我不指望它清除我的汇集。调用completed()后产生的状态应该是这样的:

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

目前正在发生的事情是这样的:

{isLoading: false, app: {}} 

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

回答

1

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

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