Question

我正在使用react-redux。

如果您的网站上有各种网页，例如公司列表，工作列表等，请假设您的组件中包含<CompanyList />和<JobList />等顶级容器你在哪里拨打电话？通常在容器中，您只需为处理程序调用dispatch。

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

当你第一次创建商店时，你可以选择在那里指定初始状态，但我只是说在减速器中这样做。所以，让我们说<CompanyList />它是如何知道在哪里获取初始状态的...在我的mapDispatchToProps中我会调用dispatch或者为公司说“GET_ALL”这样的动作？

Answer 1

如果您的网站上有各种页面，例如公司列表，工作列表等，那么假设您拥有顶级容器，例如，在您的组件中，您在哪里进行该调度呼叫？通常，在容器中，您只调用处理程序的调度。

您可以在容器中执行此操作，但我更喜欢直接触发操作。如果我必须在另一个之后触发一个动作，我将使用react-thunk middleware并在我解释here!时使用承诺。

让我们考虑一下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`.

当你第一次创建商店时，你可以选择在那里指定初始状态，但我只是说在减速器中这样做。所以我们可以说它是如何知道在哪里获取初始状态的...在我的mapDispatchToProps中，我会调用dispatch或者为公司说“GET_ALL”这样的动作？

我认为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。假设您将初始状态的缩减器编写为todosReducers和counterReducer，然后您将它们映射到商店：

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

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

完成所有这些操作后，redux将始终将商店状态的一小部分传递给您的reducer。所以传递给reducer的state就像：

function counter(state = 0, action)

实际上是store.state.counter，并且减速器应该为此“状态”返回一个新状态。因此在减速器中，您将无法处理商店的整个状态。

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

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

1 个答案: