7

redux docs' basic exampleの TodoList の例に似たものを複製しようとしています。2 番目のレデューサーは配列を受け取ります - styleItems = [{... ... }, {... ...}]- そして、最初の関数を呼び出して個々のオブジェクトのそれぞれに作用します。

initialStateに示すように、次の方法でアプリ コンテナーにを提供しcontainers/app.jsます。ただし、styleItemsレデューサーに渡される状態は、毎回空の配列のようです。

ただし、react は初期構成に基づいて UI をレンダリングし、react dev-tools は期待どおりの状態構造を示します。reduxストアはどういうわけか反応するのと同じものを見ていますか?

コンテナー/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)

レデューサー/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
    }
}
4

2 に答える 2