Redux和React-通過@connect使組件道具與狀態保持同步

Question

我有一個使用React和Redux設置的應用程序，這樣我就將根應用程序組件包裝在提供程序周圍（該組件將存儲向下傳遞，以便我的子組件可以訪問狀態和調度），如下所示：

<Provider store={Store}>
    <RootComponent />
</Provider>

我的RootComponent本質上使用JSON文件來呈現通過鍵和標題傳遞的Template組件（

<Application children={children} />

在其中一個孩子中，我使用@connect裝飾器將應用程序的狀態連接到Component，並在構造時解雇了一個調度程序以更新我的“ content”屬性，如下所示：

@connect(state => ({content: state.content}))
export default class DynamicText extends Component {

constructor(props) {
    super(props);
    var Content = require(`./jsonContent`);
    props.dispatch(loadContent(Content[props.title].elements));
}

**actions.js**
export function loadContent(content) {
    return {
        type: 'LOAD_CONTENT',
        content
    };
}

**reducers.js**
const initialState = {
route: null
};

export default function routeReducer(state = initialState, action) {
    switch (action.type) {
        case LOAD_CONTENT:
            return Object.assign({}, state, {
                content: action.content
            });
        default:
            return state;
}

我遇到的問題是，在啟動應用程序時，“內容”屬性未定義-但是，在頁面刷新時，它會填充來自JSON文件的更新的“內容”數據。 我認為問題可能是因為最初在我的@connect裝飾器中引用的state.content是未定義的，但是我希望對構造函數的立即分派能夠解決此問題。

有沒有人有經驗或關於我如何能不費吹灰之力地提出建議？ @connect真的是這里最好的選擇嗎？還是有其他選擇？

Answer 1

您需要先對商店進行充水，然后再將其傳遞給提供初始狀態的Provider ，以便在應用程序“啟動”時商店已經具有可用的數據。

使用connect是正確的方法。 如果您正在運行服務器端渲染的應用程序，則可以在第一次請求時將json內容放入附在window上的屬性中，然后在商店充水后將其清空。

沿着window.__BOOTSTRAP__的線條window.__BOOTSTRAP__ 。

store = createStore(appReducers, { content: yourJsonFileContents });

<Provider store={store}>
    <RootComponent />
</Provider>