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
功能我:
- 取我的自动取款机
- 调度receivedAtms
- 调度完成
当我派遣completed()
清楚我的大气压集合。我不完全确定。由于两位减员之间的状态是分开的,我不会期望这一点。我的期望是:
我开除后completed()
我不指望它清除我的汇集。调用completed()
后产生的状态应该是这样的:
{
isLoading: false,
app: {atms: [{id: 1}, {id: 2}, {id: 3}]}
}
目前正在发生的事情是这样的:
{isLoading: false, app: {}}
什么我可能做错了这里的任何想法。