web-dev-qa-db-ja.com

新しいreact-redux v6.0.0の実装方法

移行しようとしていたreact-reduxv5.X.Xからv6.0.0そして、それについての文書はないようです。私は次のバージョンを使用しています："react": "^16.4.2""redux": "^4.0.0""react-redux": "^6.0.0"

公式の変更ログには書かれています。

接続されたコンポーネントへの小道具としてのストアの受け渡しはサポートされなくなりました。代わりに、との両方にカスタムcontext = {MyContext} propを渡すことができます。接続のオプションとして{context：MyContext}を渡すこともできます。リンクは ここ

ここに私のルートindex.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { configureStore, history } from './Store';
import App from './App.hot';

import 'antd/dist/antd.min.css';
const reduxStore = configureStore();
ReactDOM.render(<App store={reduxStore} history={history} />, document.getElementById('root'));

ここに私のapp.jsx（ルートコンポーネント）

import React from 'react';
import PropTypes from 'prop-types';
import { Provider, connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { ConnectedRouter } from 'connected-react-router';
import Layout from './Layout';

class App extends React.Component {
  static propTypes = {
    store: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired,
  };

  render() {
    const { store, profile, history } = this.props;
    return (
      <main className="app-wrapper">
        // what i understand from change log is this part 
        // i need to pass context instead of store as props. 
        <Provider store={store}>
          <ConnectedRouter history={history}>
            <Layout user={profile} />
          </ConnectedRouter>
        </Provider>
      </main>
    );
  }
}


function mapStateToProps(store) {
  return {
    ...
  };
}
function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    ...
  }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

変更ログごとにcontextを作成し、プロバイダーに渡しました

 const storeContext = React.createContext(reduxStore);

変更後のrender関数はこちら

  render() {
    const { store, profile, history } = this.props;
    return (
      <main className="app-wrapper">
        <Provider context={storeContext}>
          <ConnectedRouter history={history}>
            <Layout user={profile} />
          </ConnectedRouter>
        </Provider>
      </main>
    );
  }

storeをpropsとしてproviderに渡すと、次のエラーが発生します

小道具でreduxストアを渡すことは削除され、何もしません。特定のコンポーネントにカスタムReduxストアを使用するには、React.createContext（）を使用してカスタムReactコンテキストを作成し、コンテキストオブジェクトをReact-Reduxのプロバイダーと次のような特定のコンポーネントに渡します。接続するために{context：MyContext}オプションを渡します

contextとして渡すと、次のエラーが発生します

「Connect（App）」のコンテキストで「store」が見つかりませんでした。ルートコンポーネントをにラップするか、カスタムReact=コンテキストプロバイダーに接続オプションに対応するReactコンテキストコンシューマーにConnect（App）を渡します。

このredux履歴ドキュメントを期待するドキュメントが見つかりませんでした here react-reduxのすべての問題と問題の解決策、およびコンテキストAPIがそれを修正した方法を示しています。しかし、実際のプロジェクトで実際にそれを実装する方法はわかりません。

誰も同じ問題に直面しましたか？または、この変更を正確に実装する方法を教えてください。

ありがとう

javascriptreactjsreact-reduxreact-context
7
hannad rehman

エラーメッセージの内容を実際に聞いて、問題を解決することができました。

私のコードには2つの問題がありました

  1. 私は<App />コンポーネントに小道具としてstoreを渡していました。これが最初の警告/エラーメッセージが来た理由です。

小道具でreduxストアを渡すことは削除され、何もしません。特定のコンポーネントにカスタムReduxストアを使用するには、React.createContext（）を使用してカスタムReactコンテキストを作成し、コンテキストオブジェクトをReact-Reduxのプロバイダーと次のような特定のコンポーネントに渡します。接続するために{context：MyContext}オプションを渡します

これを修正するには、すべてのコンポーネントに小道具としてredux store全体を渡さないでください。

  1. react-reduxからのProviderはルートコンポーネントではありませんでした。エラーメッセージは言った

「Connect（App）」のコンテキストで「store」が見つかりませんでした。ルートコンポーネントをProviderにラップするか、カスタムReactコンテキストプロバイダーと接続オプションのConnect（App）に対応するReactコンテキストコンシューマーを渡す

だから私は文中の二番目のwanringに従った

ルートコンポーネントをProviderでラップするか、カスタムReactコンテキストを渡します

だから私はプロバイダーでメインルートをラップしました。物事はうまくいき始めました。

ReactDOM.render(
  <Provider store={reduxStore}>
    <App />
  </Provider>, document.getElementById('root'),
);
10
hannad rehman

私は同じ問題を抱えていましたが、これが私がそれを解決した方法です。

const MyContext = React.createContext();

class App extends Component {
render() {
return (
<Provider store = {store} context={MyContext}>
  <BrowserRouter>
    <div>
      <Main context={MyContext}/>
    </div>
  </BrowserRouter>
</Provider>
);
}
}
0
Raunak Jain