2017-01-11 4 views
0

У меня есть приложение Redux, что, помимо всего прочего, обновляет одну строку, следовательно, государство может быть отражено как:Redux создает состояние с двойным вложенности

{ 
    theDataString: "someString", 
    otherData: { ...some other data... }, 
    someListItems: [ ...a data array... ] 
} 

Поэтому у меня есть следующий редуктор:

function updateDataString(state = {}, action) { 
    switch (action.type) { 
    case UPDATE_DATA_STRING: 
     return Object.assign({}, ...state, {theDataString: action.theDataString}); 
    default: 
     return state; 
    } 
} 

Однако при отправке в UPDATE_DATA_STRING действия, значение theDataString в состоянии становится двойным вложенным:

{ 
    theDataString: {theDataString: "someString"}, 
    otherData: {... some other data... }, 
    someListItems: [ ... a data array ... ] 
} 

С этой же проблемой уже столкнулись here. Однако решение для них состояло в том, что они вызывали combineReducers на одном редукторе, когда это было необязательно. В моем случае я звоню combineReducers на несколько редукторов - поэтому их ответ не работает для меня. Также обратите внимание, что одна и та же проблема вложенности не возникает для других данных, только строка верхнего уровня получает двойное вложение.

Что здесь общего не работает?

EDIT: Я подключить компонент, который обновляет theDataString так:

import {connect} from 'react-redux'; 
import {updateDataString} from './actions/actions'; 
import SomeList from './components/someList'; 

const mapStateToProps = (state) => { 
    return {someListItems: state.someListItems} 
}; 

const mapDispatchToProps = (dispatch, placeHolder) => { 
    return { 
    updateDataString: (aString) => dispatch(updateDataSting(aString)) 
    } 
}; 


export default SomeListConnected = connect(mapStateToProps, mapDispatchToProps)(SomeList) 

Действие происходит следующим образом:

export const UPDATE_DATA_STRING = 'UPDATE_DATA_STRING'; 

export function updateDataString(aString) { 
    return {type: UPDATE_DATA_STRING, theDataString: aString} 
} 

EDIT2: Изменение способа обновления редуктора государство - это естественное место для поиска ответов. Однако я пробовал различные перестановки здесь с небольшим эффектом:

Object.assign({}, ...state, {theDataString: action.theDataString}); 
Object.assign({}, state, {theDataString: action.theDataString}); 
{...state, {theDataString: action.theDataString}}; 

Ничего из этого не исправить.

+0

Как вы подключаете свой компонент к Redux? –

+0

BTW Ваше действие не имеет 'newString' в качестве полезной нагрузки. Это похоже на 'return {type: UPDATE_DATA_STRING, theDataString: aString}'. –

+0

@JyothiBabuAraja, спасибо, исправлено.(Исходный код не содержит этой ошибки) – Logister

ответ

1

Предполагая, что вы использовали combineReducers, ваш updateDataString редуктор следует обрабатывать состояние в виде строки, а не объект:

function updateDataString(state = "", action) { 
    switch(action.type) { 
     case UPDATE_DATA_STRING: return action.newString; 
     default; return state; 
    } 
} 

Срез редуктор будет только см. строковое значение как его «состояние», поэтому вам нужно обращаться с ним таким образом.

См. http://redux.js.org/docs/recipes/reducers/UsingCombineReducers.html для получения дополнительной информации по этой теме.

0

Попробуйте

return { ...state, theDataString: action.newString}; 

вместо этого

return Object.assign({}, ...state, {theDataString: action.newString}); 

в вашем редукторе.

Я думаю, вы используете 10 спрятанный оператор в неправильном направлении. И здесь не нужно использовать Object.assign().

Подробнее о спреде операторе here

+0

Спасибо за головы. К сожалению, предложенная замена не решила проблему. – Logister

+0

Показывает ли вложенные данные? –

+0

Да. Состояние по-прежнему выходит с двойным вложением 'theDataString'. – Logister