рендеринг двух разных компонентов в реакции

Question

• Я пытаюсь добавить реактивный липкий заголовок к своему степперу.
• Если я пытаюсь отобразить компоненты вместе, я получаю сообщение об ошибке.
• так я отлаживал и рендерил отдельно.
• при рендеринге отдельно я не сталкиваюсь с ошибкой. Магазин не определен
• Подскажите, как это исправить.
• так что в будущем я сам исправлю.
• предоставив мой фрагмент кода и песочницу ниже

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

Вы должны определить хранилище с избыточностью, чтобы передать его компоненту Provider.

Чтобы определить магазин, вам нужно иметь хотя бы редуктор, я собираюсь создать фальшивый сейчас, позже вы создадите свой собственный:

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")
);

Обновление после вашего комментария

Если вам не нужно использовать избыточность, просто используйте 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 2

Вы передаете переменную хранилища компоненту 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';

Answer 3

Поскольку вы не создали магазин с использованием функции приращения: createStore. Прежде чем вы сможете использовать приставку, вам нужно создать редуктор, чтобы дать вашему 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")
);