怎么初始化react-redux生成的store

Question

在页面第一次加载的时候我已经把react-redux生成的store绑定到了provider上。ReactDom.render(    <Provider store={store}>        {AppealRoutes}    </Provider>,    document.getElementById('appeal-container'));经过几个页面后，store里面已经保存了页面的状态数据。但是我如果有在子组件初始化store的数据，该怎么做呢？我就是想在子组件内部去将保存状态数据的store初始化成空的{}。

Answer 1

在那个子组件里，传一个action给reducer，这个action就是你要的空{},{...state,A:{},B:{}....}

Answer 2

假设你有一个子组件 Child，你想将数据存在 store 下的 child。

当前的 store 状态是

{

    // other data

    child: {

        // child data

    }

}

在 redux 的世界里， store 的更改必须由 reducer function 来更改，此时就需要发送一个类似 resetChildData 的action，简写如下

export resetChildData = () => {

    type: 'REST_CHILD_DATA',

}

然后需要书写对应的 reducer 来了真正的清除数据

const INIT_STATE = {}

export const childReducer = (state, action) => {

    switch(action.type) {

        case 'REST_CHILD_DATA':

            return INIT_STATE

        default:

            return state

    }

}

注意此时的 rootReducer 需要绑定这个 childReducer

const rootReducer = {

    child: ChildReducer,

}

至此，在 Child 组件中，将 action 通过 connect 函数传入

import resetChildData from '../actions/child'

Class Child extends Component {

}

export default connect(

    null,

    {

        resetChildData,

    }

)(Child)

在组件任何地方就可以使用 this.props.resetChildData 来清空 store 下的 child