鍍金池/ 問答/HTML/ 怎么初始化react-redux生成的store

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

在頁面第一次加載的時候我已經(jīng)把react-redux生成的store綁定到了provider上。

ReactDom.render(
    <Provider store={store}>
        {AppealRoutes}
    </Provider>,
    document.getElementById('appeal-container')
);

經(jīng)過幾個頁面后，store里面已經(jīng)保存了頁面的狀態(tài)數(shù)據(jù)。但是我如果有在子組件初始化store的數(shù)據(jù)，該怎么做呢？
我就是想在子組件內(nèi)部去將保存狀態(tài)數(shù)據(jù)的store初始化成空的{}。

回答
編輯回答
伐木累

假設(shè)你有一個子組件 Child，你想將數(shù)據(jù)存在 store 下的 child。

當(dāng)前的 store 狀態(tài)是

{
    // other data
    child: {
        // child data
    }
}

在 redux 的世界里， store 的更改必須由 reducer function 來更改，此時就需要發(fā)送一個類似 resetChildData 的action，簡寫如下

export resetChildData = () => {
    type: 'REST_CHILD_DATA',
}

然后需要書寫對應(yīng)的 reducer 來了真正的清除數(shù)據(jù)

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 函數(shù)傳入

import resetChildData from '../actions/child'

Class Child extends Component {
}

export default connect(
    null,
    {
        resetChildData,
    }
)(Child)

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

2017年10月21日 07:10
編輯回答
挽歌

創(chuàng)建一個文件為 createStore.js ：

import { createStore } from 'redux';

export default createStore({});

然后在 Provider 所謂的，大多數(shù)為 App.js 文件中：

import store from './createStore';

我有一個使用 Redux + React 的項目給你參考：
clipboard.png

文件地址：https://github.com/medz/fans-...
2017年12月24日 08:19
編輯回答
萌二代

在那個子組件里，傳一個action給reducer，這個action就是你要的空{(diào)},{...state,A:{},B:{}....}

2017年8月21日 19:32