在 props 中传递 Redux 存储

Passing Redux store in props

提问人:Luiscri 提问时间:12/8/2018 最后编辑:tk421Luiscri 更新时间:8/6/2021 访问量:10527

问:

我正在大学练习使用 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

我的文件是这样的:

索引.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);

缩减器.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 Store 中遇到那个错误,我不知道为什么。可能是任何模块的版本或类似的东西有问题吗?

我正在使用 yarn 1.12.3 和 nodejs v8.12.0

告诉我是否还有其他文件需要显示。

节点.js reactjs react-redux yarnpkg

评论


答:

12赞 markerikson 12/8/2018 #1

不要将实例传递给 。这没有任何作用,React-Redux v6 正在警告你这一点。store<App>

在 React-Redux v5 中,允许将存储作为道具直接传递给连接的组件,并且在极少数情况下它很有用,但在 v6 中已被删除。

请参阅我的帖子 惯用的 Redux:React-Redux 的历史和实现,了解为什么删除 API 的这一部分的一些细节。

另外,请注意,从 返回整个 Redux 状态对象通常不是一个好主意,如果出于某种原因您确实想这样做,则不需要传播它 - 只需 .有关一些解释,请参阅有关编写 mapState 函数的 React-Redux 文档部分mapStatereturn state

评论

0赞 Luiscri 12/8/2018
谢谢你的回答。我遵循了指南的严格指示,但我不知道错误在哪里。必须针对 v5 而不是 v6 执行此操作
0赞 markerikson 12/9/2018
你在看什么指南?即使在 v5 中,你也几乎不应该将 store 作为 prop 直接传递给组件。这主要只适用于测试连接的组件,而不对它们进行检查。<Provider>
0赞 Luiscri 12/9/2018
一个问题:如何访问商店以在我的 App 组件上启动 store.dispatch(action)?@markerikson
0赞 markerikson 12/9/2018
您应该使用 connect() 来设置在调用时调度的 prop 函数
1赞 markerikson 12/10/2018
您可以根据需要在任意数量的组件上使用多次。因此,您可以连接 ,以及其中的任何组件。或者,在父组件上使用 mapDispatch 来“绑定”动作创建者,然后将这些操作创建者传递给子组件。同样,不应将存储传递给组件。connectApp
3赞 James 12/8/2018 #2

问题出在第 25 行,即ReduxProvider

<App store={this.store}>

这个组件是用(它可以而且应该接受存储作为道具)包装的,这样做的目的是使存储可供应用程序的其余部分使用 - 因此没有必要将存储直接传递到子组件中。Provider

若要访问存储,请使用函数将组件连接到存储,然后使用 mapStateToProps / mapDispatchToProps 访问状态和/或调度操作。connect

更多信息

7赞 andyb 5/28/2019 #3

React Redux 7.0.1 允许再次作为 Prop 传递。store

从发行说明中:

我们恢复了将商店作为道具直接传递给连接组件的功能。由于内部实现更改(组件不再直接订阅应用商店),这在版本 6 中删除了。一些用户表示担心,在单元测试中使用上下文是不够的。由于我们的组件再次使用直接订阅,因此我们重新实现了此选项,这应该可以解决这些问题。