2016-06-07 2 views
1

Я реализую прореагировать с Redux, и я получил вложенное состояние с тем же именем (смотрите рисунок)Уплотненное состояние с тем же именем

enter image description here

Вот мой редуктор:

function helps(state = { 
    isFetching: false, 
    items: [] 
}, action) { 
    switch (action.type) { 
    case types.HELPS_FEED_REQUEST: 
     return Object.assign({}, state, { 
     isFetching: true 
     }); 
    case types.HELPS_FEED_SUCCESS: 
     return Object.assign({}, state, { 
     isFetching: false, 
     items: [ 
      ...state.items, 
      ...action.items 
     ] 
     }); 
    default: 
     return state; 
    } 
} 

const rootReducer = combineReducers({ 
    helps 
}); 

export default rootReducer; 

редуктор index.js:

import {combineReducers} from 'redux'; 
import help from './helpReducer'; 
import helps from './helpsReducer'; 


const rootReducer = combineReducers({ 
    help, 
    helps 
}); 

export default rootReducer; 

Мой вопрос: почему у меня нет ne «помогает» состояние с isFetching и элементами? Есть ли что-то очевидное, что мне не хватает?

EDIT:

По-видимому, именно из-я использую скомбинировать редуктор. Так что, если изменить имя функции, например helps_feed, государство будет:

helps 
-- helps_feed 

Почему combineReducers сделать вложенное состояние?

configureStore.js

import { createStore, applyMiddleware, compose } from 'redux'; 
import rootReducer from '../reducers'; 
import createSagaMiddleware, {END} from 'redux-saga'; 
import helpSagas from '../sagas/helpSaga'; 

export default function configureStore(initialState) { 
    const rootSagas = [ 
    helpSagas 
    ]; 
    const sagaMiddleWare = createSagaMiddleware(); 

    const store = createStore(
    rootReducer, 
    initialState, 
    compose(
     applyMiddleware(sagaMiddleWare), 
     window.devToolsExtension ? window.devToolsExtension() : f => f 
)); 

    store.runSaga = sagaMiddleWare.run(...rootSagas); 
    store.close =() => store.dispatch(END); 
    return store; 
} 
+0

Существует не достаточно информации, чтобы помочь вам, вы можете показать файл, в котором вы создаете свою магазин? – QoP

+0

@QoP Я обновил свой вопрос. –

ответ

2

combineReducers создает новый объект с редукторами, которые Вы передаете ему, что причина, вы получили ваши состояния вложенной.

Чтобы исправить это, экспортируйте редуктор без использования combReducers, поскольку вы не комбинируете никаких редукторов.

function helps(state = { 
    isFetching: false, 
    items: [] 
}, action) { 
    switch (action.type) { 
    case types.HELPS_FEED_REQUEST: 
     return Object.assign({}, state, { 
     isFetching: true 
     }); 
    case types.HELPS_FEED_SUCCESS: 
     return Object.assign({}, state, { 
     isFetching: false, 
     items: [ 
      ...state.items, 
      ...action.items 
     ] 
     }); 
    default: 
     return state; 
    } 
} 

export default helps; 

Сценарий с несколькими комбинированными устройствами.

rootReducer.js

import auth from './auth' 
import trainer from './trainer/trainerReducer' 
import athlete from './athlete/athleteReducer' 

const rootReducer = combineReducers({ 
    auth, 
    trainer, 
    athlete 
}); 

trainerReducer.js

import { combineReducers } from 'redux' 
import manageAthletes from './manageAthletes' 
import manageRoutines from './manageRoutines' 

const trainerReducer = combineReducers({ 
    manageRoutines, 
    manageAthletes 
}); 

export default trainerReducer; 

athleteReducer

import trainer from './trainer' 
import routine from './routine' 

const athleteReducer = combineReducers({ 
    trainer, 
    routine 
}); 

export default athleteReducer; 
+0

, что имеет смысл. но combReducers следует применять только один раз? Здесь я привел пример: https://github.com/reactjs/redux/blob/master/examples/shopping-cart/reducers/ В нем имеется несколько combReducers(). Почему бы не использовать только один combReducers в index.js? –

+0

Вы можете применять его столько раз, сколько хотите, оно используется, чтобы сделать ваши состояния более «независимыми», как вы можете видеть в примере, который я добавил к ответу: -P. – QoP

Смежные вопросы