Redux,如果我想访问数据，我必须在所有容器中导入存储吗？

Question

也许我并没有把注意力集中在redux上，但是我所看到的所有示例都没有太多地访问容器之间的状态，所以我没有看到store.getState（）的太多用法，但是即使您想要分派，您也需要访问存储，对吗？

Answer 1

通常，您只想让顶级容器组件能够访问存储--它们将把任何必要的数据或动作分派作为道具传递给它们的子组件。这就是“智能”组件和“哑”组件之间的区别--“智能”组件知道Redux存储/状态，而“哑”组件只是获得传递给它们的道具，而不知道更大的应用程序状态。

然而，即使只是将存储区传递给容器组件也会变得乏味。这就是为什么React-Redux提供了一个包装整个应用程序的开箱即用组件。在文件里查一下。这是provider组件，当您用它包装整个应用程序时，只需将存储区传递给组件一次：

import createStore from '../store';

const store = createStore()

class App extends Component {

  render() {
    return (
      <Provider store={store}>
        <MainAppContainer />
      </Provider>
    )
  }
}

正如您在这里看到的，我有一个单独的配置文件，只是为了我的商店，因为有很多修改可以做，对于任何远程复杂的应用程序，您会发现自己在使用compose应用中间件等方面也做了同样的事情。

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from './actionCreators';

const mapStateToProps = function(state){
  return {
    something: state.something,
  }
}

const mapDispatchToProps = function (dispatch) {
  return bindActionCreators({
    getSomething: actionCreators.getSomething,
  }, dispatch)
}

class MainAppContainer extends Component {

    componentDidMount() {
      //now has access to data like this.props.something, which is from store
      //now has access to dispatch actions like this.props.getSomething
    }

    render() {
        //will pass down store data and dispatch actions to child components
        return (
               <div>
                   <ChildComponent1 something={this.props.something} />
                   <ChildComponent2 getSomething={this.props.getSomething} />
               </div>
        )
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(MainAppContainer)

根据上面的示例，您将看到，由于我将this.props.something传递给childcomponent1，因此它可以访问存储中的something数据，但不能访问getsomething分派操作。同样，ChildComponent2只能访问GetSomething分派操作，而不能访问Something数据。这意味着您只将组件公开给它们从存储区中所需的组件。

例如，因为childcomponent2将分派操作传递为getsomething，所以在我的onclick中，我可以调用this.props.getsomething，它将调用分派操作，而不需要对存储区进行任何访问。以同样的方式，它可以继续向下传递getsomething到另一个子组件，该组件可以调用它和/或向下传递它，循环可以无限期地继续下去。

class ChildComponent2 extends Component {

    render() {
        return (
            <div>
                <div onClick={this.props.getSomething}>Click me</div>
                <NestedComponent getSomething={this.props.getSomething} />
            </div>
        )
    }
}

从注释中编辑

虽然这与问题没有直接关系，但在评论中，你似乎对行动有点困惑。我实际上并没有在这里定义动作getsomething。相反，在Redux应用程序中，通常将所有操作定义放在一个名为actioncreators.js的单独文件中。它包含与您的操作命名相同的函数，并返回具有type属性的对象以及操作所需的任何其他方法/数据。例如，这里有一个非常简单的例子actioncreators.js文件：

export function getSomething() {
    return {
        type: 'GET_SOMETHING',
        payload: {
            something: 'Here is some data'
        }
    }
}

此操作类型是您的减速机将侦听的，以知道哪个操作正在被激发。