reactjs - Redux，如果我想访问数据，是否必须在所有容器中导入存储？

Question

也许我并没有全神贯注于 redux，但我见过的所有示例并没有真正在容器之间访问太多状态，因此我没有看到 store.getState() 的太多用法，但即使你想要发货，你需要访问商店，对吗？

所以，除了导入之外从“path/to/store/store”导入商店

在我想要 getState() 或“dispatch”的每个文件中，如何访问该状态，因为如果我不包含它，则存储未定义。

Answer 1

一般来说，您只想制作有权访问存储的顶级容器组件 - 它们会将任何必要的数据或操作分派(dispatch)作为 Prop 传递给其子组件。这就是“智能”组件和“哑巴”组件之间的区别 - “智能”组件知道 Redux 存储/状态，而“哑巴”组件只是将 props 传递给它们，并且不知道更大的应用程序状态。

但是，即使只是将存储传递给容器组件也会变得乏味。这就是为什么 React-Redux 提供了一个开箱即用的组件来包装整个应用程序。文档中的 Check it out。这是 Provider 组件，当您用它包装整个应用程序时，只需将存储传递给组件一次:

import createStore from '../store';

const store = createStore()

class App extends Component {

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

正如您在这里所看到的，我有一个单独的配置文件专门用于我的商店，因为您可以进行很多修改，并且对于任何远程复杂的应用程序，您会发现自己对使用 compose 之类的事情做同样的事情应用中间件。

然后，任何剩余的“智能”组件(通常是包装器)都需要监听存储。这是使用 connect 方法完成的。这允许您将状态的各个部分映射到组件属性以及将操作作为属性进行调度。

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 引用该组件上的那些内容即可。

基于上面的示例，您会看到，因为我将 this.props.something 传递给 ChildComponent1，所以它可以访问 something code> 来自存储的数据，但它无权访问 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'
        }
    }
}

此操作类型是您的 reducer 将监听的类型，以了解正在触发哪个操作。