javascript - Redux ReactJS:组件如何访问商店？

首先，我在stackoverflow上看到了很多看起来像我的问题，但是我想我错过了一些事情，这就是为什么我要问这个问题。

我的应用程序中有一个Maincomponent，它使用addDatas Action 将数据添加到我的商店中。
这部分有效，我可以使用this.props在上下文和MainComponent的子级中访问我的商店。
但是，当我转到OtherComponent(这是我仅想显示MainComponent中收集的所有数据的基本组件)时，我的商店似乎空了。

有人可以告诉我我做错了什么，以及使用MainComponent时要访问存储中设置的数据的OtherComponent应该是什么样的。

谢谢。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from './reducers'

const store = createStore(reducer);

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

reducers.js

import { ADD_DATAS } from '../constants';

const reminder = (action) => {
  switch (action.type) {
    case ADD_DATAS:
      return {
        datas: action.datas,
        id: action.id
      };
    default:
      return {
        text: action.text,
        id: action.id
      };
  }

}

const reminders = (state = [], action) => {
  let reminders = null;
  switch (action.type) {
    case ADD_DATAS:
      reminders = [...state, reminder(action)];
      return reminders;
    default:
      return state;
  }
}

export default reminders;

Action .js

import {ADD_DATAS} from '../constants';
// ADD_DATAS = 'ADD_DATAS' in constants

export const addDatas = (text, id) => {
  const action = {
    type: ADD_DATAS,
    datas: text,
    id: id
  }
  return action;
}

App.js

import React, { Component } from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'

import RouterComponent from '../Router/RouterComponent';
import OtherComponent from './OtherComponent';
import MainComponent from './MainComponent';

class App extends Component {
  render() {
    return (
        <div className="container-fluid">
          <div className="row">
           <Sidebar />
            <Router>
              <RouterComponent>
                <Switch>
                    <Route exact path="/oth" component={OtherComponent}/>
                    <Route exact path="/main" component={MainComponent}/>
                    <Route exact path="/" component={MainComponent}/>
                </Switch>
              </RouterComponent>
            </Router>
          </div>
        </div>
    );
  }
}

export default App;

MainComponent.js

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { addDatas } from '../actions'

class MainComponent extends Component {

  addDataStore(text, id){
    this.props.addDatas(text, id)
  }

  render(){
    return ( .... )
  }
}

function mapDispatchToProps(dispatch){
  return bindActionCreators({addDatas}, dispatch);
}

function mapStateToProps(state){
  return {
    reminders: state
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(MainComponent);

OtherComponent.js

import React, { Component } from 'react';
import { connect } from 'react-redux'

class OtherComponent extends Component {
    render(){
       console.log(this.props.reminders)
    }
}

function mapStateToProps(state){
    return {
        reminders: state
    }
}
export default connect(mapStateToProps)(OtherComponent);

Sidebar.js

import React, { Component } from 'react';
import '../css/sidebar.css';

export default class Sidebar extends Component {
  render(){
    return (
      <nav className="col-2 col-md-2 sidebar">
        <div className="sidebar-logo">
          <a href="/main">
            MainComponent
            </div>
          </a>
        </div>
        <ul >
          <li >
            <a href="/main" >
              MainComponent
            </a>
          </li>
          <li >
            <a href="/oth" >
              OtherComponent
            </a>
          </li>
        </ul>
      </nav>
    )
  }
}

最佳答案

要了解这一点，我们首先需要了解以下片段

export default connect(mapStateToProps, mapDispatchToProps)(MainComponent);

我们正在将mapStateToProps函数传递给从react-redux获得的connect方法。因此，让我们了解连接的工作原理及其实际作用

1. It calls your mapStateToProps function and passes the current value of (redux state/ redux store) to the function.
2. Then whatever value is returned by the mapStateToProps function after execution is passed down as props to the mainComponent(in your case).

因此，由于主要组件的子组件没有连接语句，因此 Prop 不可用。
您可以将redux状态作为两个 Prop 来使用

1. Passing it down from main component as follows inside mainComponent.js render method we have

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { addDatas } from '../actions'

class MainComponent extends Component {

  addDataStore(text, id){
    this.props.addDatas(text, id)
  }

  render(){
    return (
      <Child1 reminders={this.props.reminders}/*can be accessed as this.props.reminders*//>
      <Child2 reminders={this.props.reminders}/*can be accessed as this.props.reminders*//>
    )
  }
}

function mapDispatchToProps(dispatch){
  return bindActionCreators({addDatas}, dispatch);
}

function mapStateToProps(state){
  return {
    reminders: state
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(MainComponent);

2.Another way to do this will be using connect Statement inside your child component as well

export default connect(mapStateToProps, mapDispatchToProps)(MainComponent);

 class Child1 extends Component{
 .....





 }



function mapDispatchToProps(dispatch){
  return bindActionCreators({addDatas}, dispatch);
}

function mapStateToProps(state){
  return {
    reminders: state
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Child1);//need to change here must be same as className