不同 React 容器组件的初始数据加载 - Redux

Question

我正在使用 react-redux。

如果您的网站上有各种页面，例如公司列表、工作列表等，假设您有 <CompanyList /> 和 <JobList /> 等顶级容器，在您的组件在哪里进行调度调用？通常在容器中你只调用处理程序的调度。

Reducers 指定初始状态。但是，如果我的应用程序中有多种类型的页面和实体怎么办？试图弄清楚如何在应用程序中的不同类型的容器组件之间协调呈现只读列表。

当您第一次创建商店时，您可以选择在那里指定初始状态，但我只是说在 reducer 中进行。所以让我们说 <CompanyList /> 它怎么知道从哪里获取初始状态..在我的 mapDispatchToProps 中，我会在哪里调用 dispatch 或者说一个动作，比如公司的 "GET_ALL"？

Answer 1

When you have various pages on your site such as list of companies, list of jobs, etc. and let's say you have top level containers for those such as and, in your component where do you make that dispatch call? Usually, in containers, you only call dispatch for handlers.

你可以在容器中完成，但我更喜欢直接触发动作。如果我必须一个接一个地触发一个动作，我会使用 react-thunk middleware and make use of promises as I explained 。

让我们假设我们的动作创建者在 action.js 文件中，如下所示：

action.js

/*
 * action types
 */
export const ADD_TODO = 'ADD_TODO'
export const TOGGLE_TODO = 'TOGGLE_TODO'
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'


/*
 * other constants
 */

export const VisibilityFilters = {
  SHOW_ALL: 'SHOW_ALL',
  SHOW_COMPLETED: 'SHOW_COMPLETED',
  SHOW_ACTIVE: 'SHOW_ACTIVE'
}

/*
 * action creators
 */

export function addTodo(text) {
  return { type: ADD_TODO, text }
}

export function toggleTodo(index) {
  return { type: TOGGLE_TODO, index }
}

export function setVisibilityFilter(filter) {
  return { type: SET_VISIBILITY_FILTER, filter }
}

这些操作将在容器中使用 TodoList 作为：

TodoList.js

import react, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { addTodo, ToggleTodo, setVisibilityFilter } from '../actions/actions'
//import * as actions from '../actions/actions' this is a shorter way when you want to use all the actions in the actions file in the component.

class ToDoList extends Component {
   render () {
     //Rendering logic here
   }
}

const mapStateToProps = (state) => {
  const { todos, counter } = state
    return { todos, counter }
}

const mapDispatchToProps = (dispatch) => {
  // here is how I would map the actions individually
  return {
    addTodo: bindActionCreators(addTodo, dispatch),
    ToggleTodo: bindActionCreators(ToggleTodo, dispatch),
    setVisibilityFilter: bindActionCreators(setVisibilityFilter, dispatch)
  }


  //Or if you want to map all the actions in a single shot.
  //return {
  //  actions: bindActionCreators(actions, dispatch) 
  //}
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoList)

这样操作将作为道具提供给 TodoList 组件。您将直接调用：

this.props.addTodo(todo); //if the actions were imported mapped individually.

//Or
this.props.actions.addTodo(todo); //if all the actions were imported and mapped using `actions`.

When you first create the store you have the option to specify initial state there, but I'm just saying do it in the reducer. So lets say for how does it know where to grab initial state..in my mapDispatchToProps is that where I'd call dispatch or something with say an action such as "GET_ALL" for companies?

我认为 redux documentation 很好地解释了这一点。使用 redux 模式时，通常会为初始状态的每个 root 属性创建一个 reducer，并为其创建一个 reducer。 combineReducer 的工作是将 reducer 绑定到初始状态的每个 root 属性。您会注意到他们使用的 redux 文档：

import { combineReducers } from 'redux'
import todos from './todos'
import counter from './counter'

export default combineReducers({
  todos,
  counter
})

人们会注意到商店的初始状态是具有带键的元素 todos 和 counter。假设您改为将初始状态的 reducer 写为 todosReducers 和 counterReducer，那么您应将它们映射到商店：

import { combineReducers } from 'redux'
import todosReducer from './todosReducer'
import counterReducer from './counterReducer'

export default combineReducers({
  todos: todosReducer,
  counter: counterReducer
})

做所有这些，redux 将始终将商店状态的一部分传递给您的减速器。所以传递给减速器的 state 如：

function counter(state = 0, action)

实际上是 store.state.counter，reducer 应该 return 这个 "state" 的新状态。所以在 reducer 中，你不需要处理整个 store 的状态。

此外，请参阅 redux 文档中的 normalizing state shape。当您的应用程序在您的商店中具有复杂状态时，这会有所帮助。当状态归一化时，它变得更容易减少。

不同 React 容器组件的初始数据加载 - Redux

Initial Load of Data for Different React Container Components - Redux

reactjs

redux

react-redux