以反應方式渲染兩個不同的組件

Question

• 我正在嘗試將React Sticky標頭添加到我的步進器中。
• 如果我嘗試將bot組件渲染在一起，則會出現錯誤。
• 所以我分別調試和渲染。
• 當我單獨渲染時，我沒有遇到錯誤。 未定義存儲
• 你能告訴我如何解決它。
• 這樣將來我會自己修復它。
• 在下面提供我的代碼段和沙箱

https://codesandbox.io/s/y2kjpl343z

index.js

import React from "react";
import ReactDOM from "react-dom";
import Demo from "./demo";
import App from "./components/App";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from 'redux'


// const store = createStore(
//   reducer,
//   applyMiddleware(thunk, logger)
// )

//ReactDOM.render(<Demo />, document.querySelector("#root"));

render(
       <Provider store={store}>
    <App />
    <Demo />
  </Provider>,
  document.getElementById("root")
);

Answer 1

因為您沒有使用redux函數創建商店： createStore 。 在能夠使用redux之前，您首先需要創建一個reducer以提供給Provider 。

文檔中的示例：

import { createStore } from 'redux'

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}

const store = createStore(todos, ['Use Redux'])

render(
  <Provider store={store}>
    <App />
    <Demo />
  </Provider>,
  document.getElementById("root")
);

Answer 2

您必須定義一個redux存儲以傳遞到Provider組件。

要定義商店，您至少需要有一個reducer，我現在要創建一個偽造的商店，稍后再創建自己的商店：

import React from "react";
import ReactDOM from "react-dom";
import Demo from "./demo";
import App from "./components/App";
import { render } from "react-dom";
import { Provider } from "react-redux";

import { createStore } from 'redux'

const reducer = () => ({})
const store = createStore(reducer)

render(
  <Provider store={store}>
    <App />
    <Demo />
  </Provider>,
  document.getElementById("root")
);

發表評論后更新

如果您不需要使用redux，只需使用div或更好的Fragment ：

import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import Demo from "./demo";
import App from "./components/App";

ReactDOM.render(
  <Fragment>
    <App />
    <Demo />
  </Fragment>,
  document.getElementById("root")
);

Answer 3

您正在將存儲變量傳遞給Provider組件，但不要定義它。 創建新文件：

import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';

const rootReducer = combineReducers({
  // You can fill here all the states that you want
})

export const store = 
createStore(  
  rootReducer,
  compose(
    applyMiddleware(thunk), window.devToolsExtension ? window.devToolsExtension() : f => f)
);

現在將文件導入到index.js

從“ ./store”導入商店；