redux - 减速器状态为空白答案

【问题标题】：redux - reducer state is blankredux - 减速器状态为空白
【发布时间】：2016-04-23 21:53:59
【问题描述】：

我正在尝试在 redux docs' basic example 中复制类似于 TodoList 示例的内容。第二个 reducer 接收一个数组 - styleItems = [{... ... }, {... ...}] - 然后调用第一个函数对每个单独的对象进行操作。

我通过以下方式向应用容器提供initialState，如containers/app.js 所示。但是，传递给 styleItems 减速器的状态似乎是一个空白数组 - 每次都是。

但是，react 会根据初始配置呈现 UI，并且 react dev-tools 会按预期显示状态结构。 redux 商店是否以某种方式看到与 react 相同的东西？

containers/app.js

function starterInfo(state) {
    return {

        // The ID of this particular object
        id: 12345,

        // Various keys and theri css values
        styleItems: [
            {
                pk: 31,
                order: 1,
                label: 'Caption text color',
                css_identifier: '.caption-text',
                css_attribute: 'color',
                css_value: '#FFFFFF'
            },
            {
                pk:23,
                order: 2,
                label: 'Caption link color',
                css_identifier: '.caption-link',
                css_attribute: 'color',
                css_value: '#FEFEFE'
            }
        ],

        // Network state info
        currently_fetching: false,
        currently_posting: false
    }
}

export default connect(starterInfo)(App)

reducers/index.js

// This handles a single styleItem object within the array
function change_css(state = {}, action){
    switch (action.type){
        case actions.CHANGE_CSS:

            if (state.order !== action.order){
                return state
            }

            return {
                ...state,
                css_value
            }

        default:
            return state
    }
}

// This handles the styles array in the global state
function styleItems(state = [], action){
    switch(action.type){       
        case actions.CHANGE_CSS:

            const foobar = state.map(styleItem =>
                change_css(styleItem, action)
                )            

            return foobar

        default:
            return state
    }
}

【问题讨论】：

标签： javascript reactjs redux redux-devtools

【解决方案1】：

您还可以使用以 createStore(reducer, [initialState]) http://rackt.org/redux/docs/api/createStore.html 为参数的 redux 函数 createstore 传递初始状态

假设你有两个减速器

change_css(state = {}, action)
function styleItems(state = [], action)

如果你使用 comibneReducer 来初始化你的状态

var reducer = combineReducers({
    css: change_css,
    items: styleItems
})

现在

var store = createStore(reducer)
console.log(store.getState())

您的商店将包含{ css: {}, items: [] }

现在如果要初始化状态，可以将初始状态作为 createStore 函数的第二个参数传递。

createStore(reducer, {css:{some properties},items:[{name:"obj1"},{name:"obj2"},{name:"obj3"}]})

现在您的存储将包含初始状态。 {css:{some properties,items:[{name:"obj1"},{name:"obj2"},{name:"obj3"}]}

例如，您可以从服务器提供此状态并将其设置为应用程序的初始状态

【讨论】：

【解决方案2】：

简短的回答是您没有完全正确地传递初始状态。 React Redux 绑定的connect 函数的第一个参数是mapStateToProps。该函数的重点是获取应用中已经存在的状态，并将其映射到组件的 props。您在 starterInfo 函数中所做的只是硬编码组件的状态。因为你返回的是一个普通对象，所以 React 并不真正知道其中的区别，所以它工作得很好，但 Redux 还不知道你的应用程序状态。

相反，您应该将初始状态直接提供给减速器，如下所示：

const intialStyleItemsState = [
    {
        pk: 31,
        order: 1,
        label: 'Caption text color',
        css_identifier: '.caption-text',
        css_attribute: 'color',
        css_value: '#FFFFFF'
    },
    {
        pk:23,
        order: 2,
        label: 'Caption link color',
        css_identifier: '.caption-link',
        css_attribute: 'color',
        css_value: '#FEFEFE'
    }
];

function styleItems(state = intialStyleItemsState, action){ ...

最终，由于您要拆分减速器，您需要使用 Redux 的 combineReducers 实用程序将它们重新组合在一起，将根减速器提供给您的商店并从那里开始。

【讨论】：