Question

我正在尝试将React Sticky标头添加到我的步进器中。
如果我尝试将所有组件一起呈现给bot，则会出现错误。
所以我分别调试和渲染。
当我单独渲染时，我没有遇到错误。存储没有定义
你能告诉我如何解决它吗？
以便将来我自己修复。
在下面提供我的代码段和沙箱

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之前，您首先需要创建一个简化器以提供给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”导入商店；

以反应方式渲染两个不同的组件

3 个答案:

发表评论后更新