我一直在努力思考这个概念，但没有成功。 官方 React 教程非常好，但对我来说太复杂了，只是有点太难了。

我正在尝试了解 Redux，到目前为止，我可以创建 Action 、reducer，我可以分派(dispatch)一个 Action ，然后查看分派(dispatch)后存储状态如何变化。我还设法理解了 react-redux 的 connect，它工作得非常好，我能够从我的应用程序中的任何地方触发调度。所以我想我几乎明白了。几乎是因为这是房间里的大象 - 我发送了操作，我看到 Redux 状态发生了变化，但是我该如何更改 UI？

例如，我的初始状态中有一个 text 对象，其值为 Initial text 并且单击按钮后，我想将文本更改为 Clicked text 并在 UI 中的某处显示文本(假设在按钮上)。

我如何“访问”React 中的 Redux 状态以及如何动态更改它？

没有React好像很简单，e.g.: https://jsfiddle.net/loktar/v1kvcjbu/ - render 函数处理一切，我理解这里发生的一切。

但另一方面，官方 React+Redux 教程中的“todo”看起来像这样:https://redux.js.org/docs/basics/ExampleTodoList.html ，它太复杂了，我不知道去哪里找。

Add Todo 按钮提交一个表单，该表单调度 dispatch(addTodo(input.value)) 操作。该操作本身什么都不做，只是增加 ID 并将文本传递给商店，而缩减程序只是返回新状态。那么 todo 是如何在页面上呈现的呢？在哪里？我现在迷路了。也许有更简单的教程，我很想有一个一键式的 Redux 教程它仍然可以复杂的多层组件:(

我怀疑 TodoList.js 中发生了魔法，因为它们正在映射那里的某些东西，但我仍然不知道待办事项从哪里来，以及它与 Redux 有什么关系(没有简单的 reducer/action/dispatch那个文件)。

感谢您的帮助!

最佳答案

我认为您的困惑是 reducer composition 的那一部分和 selectors .

让我们以相反的顺序从 UI 向后看。

在连通分量中 containers/VisibleTodoList.js它从 mapStateToProps 中的“状态”(redux 的全局存储对象)获取 todos，同时通过 getVisibleTodos 传递它 方法。
可以称为选择器，因为它只选择并返回它接收到的数据的一部分:

import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed)
    case 'SHOW_ALL':
    default:
      return todos
  }
}

const mapStateToProps = state => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispatchToProps = dispatch => {
  return {
    onTodoClick: id => {
      dispatch(toggleTodo(id))
    }
  }
}

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

传递给 mapStateToProps 的 state(redux store) 来自 root reducer reducers/index.js并且实际上是一个单一的 reducer (对象)，它通过 redux 的 combineReducers 实用程序表示所有其他 reducer 的组合:

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

  const todoApp = combineReducers({
    todos,
    visibilityFilter
  })

  export default todoApp   

如您所见，todos reducer 就在那里。所以这就是为什么在 mapStateToProps 中我们这样调用它 state.todos。

这是 reducers/todos.js :

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ]
    case 'TOGGLE_TODO':
      return state.map(todo =>
        (todo.id === action.id) 
          ? {...todo, completed: !todo.completed}
          : todo
      )
    default:
      return state
  }
}

export default todos  

对于 'ADD_TODO' 类型的每个操作，它将返回一个带有新 todo 的新状态:

case 'ADD_TODO':
          return [
            ...state,
            {
              id: action.id,
              text: action.text,
              completed: false
            }
          ]  

这是里面的 Action 创建器 actions/index.js :

let nextTodoId = 0
export const addTodo = text => {
  return {
    type: 'ADD_TODO',
    id: nextTodoId++,
    text
  }
}

所以这是 redux 的完整流程(我省略了调用操作的按钮，因为我认为这对你来说是显而易见的部分)。
好吧，几乎是一个完整的流程，如果没有包装 App 并在 index.js 中将商店注入(inject)它的 Provider HOC，这一切都不可能发生。 :

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'

let store = createStore(todoApp)

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

现在，当 redux state 更改时，调用 mapStateToProps 将返回新映射的 props >。 connect 将传递那些新的 props，这将触发一个新的 render 调用(实际上是整个 React 生命周期流程)到连接的组件。< br/=""> 这样，UI 将使用商店中的新数据重新呈现。

关于javascript - Redux 如何改变 React 中的 UI？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47487656/