Передача магазина Redux в реквизит - PullRequest
Новая
       4

Передача магазина Redux в реквизит

0 голосов
/ 07 декабря 2018

Я занимаюсь созданием приложений в университете с использованием React и Redux.Когда я запускаю сервер с помощью Yarn, я получаю эту ошибку: 

Passing redux store in props has been removed and does not do anything. 
To use a custom Redux store for specific components, create a custom React context with React.createContext(), and pass the context object to React-Redux's Provider and specific components like: 
<Provider context={MyContext}><ConnectedComponent context={MyContext} /></Provider>. 
You may also pass a {context : MyContext} option to connect

Мои файлы:

index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import ReduxProvider from './redux/ReduxProvider';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<ReduxProvider />, document.getElementById('root'));

serviceWorker.unregister();

ReduxProvider 

import { questions } from "../assets/mock-data.js";
import { Provider } from 'react-redux';
import GlobalState from "./reducers";
import { createStore } from 'redux';

import React from 'react';
import App from '../App';

export default class ReduxProvider extends React.Component {
    constructor(props) {
        super(props);
        this.initialState = {
            score: 0,
            finished: false,
            currentQuestion: 0,
            questions: [ ...questions]
        };
        this.store = this.configureStore();
    }

    render() {
        return (
            <Provider store={ this.store }>
                <div>
                    <App store={ this.store } />
                </div>
            </Provider>
        );
    }

    configureStore() {
        return createStore(GlobalState, this.initialState);
    }
}

App.js 

import React, { Component } from 'react';
import './App.css';
import { connect } from 'react-redux';

class App extends Component {
  render() {
    return (
      <div className="App">
        Hola
      </div>
    );
  }
}

function mapStateToProps(state) {
    return {
      ...state
    };
}

export default connect(mapStateToProps)(App);

redurs.js 

import { combineReducers } from 'redux';

function score(state = 0, action = {}) {
    switch(action.type) {
        default:
            return state;
    }
}

function finished(state = 0, action = {}) {
    switch(action.type) {
        default:
            return state;
    }
}

function currentQuestion(state = 0, action = {}) {
    switch(action.type) {
        default:
            return state;
    }
}

function questions(state = 0, action = {}) {
    switch(action.type) {
        default:
            return state;
    }
}

const GlobalState = (combineReducers({
    score,
    finished,
    currentQuestion,
    questions
}));

export default GlobalState;

К этому времени я смогу по крайней мере запустить приложение без ошибок, но я всегда получаю эту ошибку в магазине Redux, я не знаю почему.Может ли быть проблема с версией какого-либо модуля или чего-то подобного?

Я использую пряжу 1.12.3 и nodejs v8.12.0

Скажите, есть ли другой файл, который мне нуженпоказать.

Ответы [ 3 ]

0 голосов
/ 07 декабря 2018

Проблема заключается в строке 25 в ReduxProvider, т. Е. 

<App store={this.store}>

Этот компонент обернут в Provider (который может и должен принять хранилище в качестве опоры) иЦель этого состоит в том, чтобы сделать хранилище доступным для остальной части приложения - поэтому передача хранилища непосредственно в дочерние компоненты не требуется.

Чтобы получить доступ к хранилищу, используйте функцию connect, чтобыподключите компонент к хранилищу, а затем mapStateToProps / mapDispatchToProps для доступа к состоянию и / или действиям по отправке.

Дополнительная информация

0 голосов
/ 28 мая 2019

React Redux 7.0.1 позволяет снова передавать store в качестве проп.

Из примечаний к выпуску:

Мы вернулиВозможность передать магазин в качестве опоры непосредственно на подключенные компоненты.Это было удалено в версии 6 из-за внутренних изменений реализации (компоненты больше не подписывались на хранилище напрямую).Некоторые пользователи выразили обеспокоенность тем, что работы с контекстом в модульных тестах недостаточно.Поскольку наши компоненты снова используют прямые подписки, мы повторно реализовали эту опцию, и это должно решить эти проблемы.

0 голосов
/ 07 декабря 2018

Не передавайте экземпляр store в <App>.Это ничего не делает, и React-Redux v6 предупреждает вас об этом.

В React-Redux v5 допускается передача хранилища напрямую в виде проповеди к подключенному компоненту, и были редкие случаи, когда это было полезно,но в v6 это было удалено.

Пожалуйста, смотрите мой пост Идиоматический Redux: история и реализация React-Redux , чтобы узнать, почему эта часть API была удалена.

Также обратите внимание, что возвращение всего объекта состояния Redux из mapState обычно не очень хорошая идея, и если по какой-то причине вы делаете на самом деле хотите это сделать, вам не нужночтобы распространить это - просто return state.См. раздел документации React-Redux по написанию mapState functions для некоторых объяснений.

...