怎么初始化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

Answer 3

创建一个文件为 createStore.js ：

import { createStore } from 'redux';

export default createStore({});

然后在 Provider 所谓的，大多数为 App.js 文件中：

import store from './createStore';

我有一个使用 Redux + React 的项目给你参考：

文件地址：https://github.com/medz/fans-...