reactjs – Redux如何在React中更改UI？

我一直在努力围绕这个概念,但没有运气.
官方的React教程非常好,但对我来说这太复杂了,只是有点太难了.

我正在尝试理解Redux,到目前为止,我可以创建动作,减少器,我可以调度一个动作,然后在调度后查看存储状态如何变化.我还设法了解react-redux的连接,它运行得非常好,我能够从我的应用程序的任何地方触发调度.所以我想我差点搞清楚了.几乎,因为这是房间里的大象 – 我发送动作,我看到Redux状态发生变化,但我如何更改UI？

例如,我的初始状态中的文本对象具有值初始文本,单击一个按钮后我想将文本更改为单击文本并在UI中的某处显示文本(假设在按钮上).

如何在React中“访问”Redux状态,如何动态更改它？

没有React似乎很简单,例如……：https://jsfiddle.net/loktar/v1kvcjbu/ – 渲染函数处理一切,我理解这里发生的一切.

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

Add Todo按钮提交一个调度dispatch(addTodo(input.value))动作的表单.动作本身不会增加ID并将文本传递给存储,而reducer只返回新状态.然后如何在页面上呈现待办事项？哪里？我此时迷路了.也许有更简单的教程,我喜欢有一个按钮Redux教程,它仍然可以复杂的多层组件:(

我怀疑魔法发生在TodoList.js中,因为他们正在那里映射,但我仍然不知道todos来自哪里,以及它与Redux有什么关系(该文件中没有简单的reducer / action / dispatch) .

谢谢你的帮助！

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

让我们从UI背面以相反的顺序查看它.

在连接组件containers/VisibleTodoList.js中,它从mapStateToProps中的“state”(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的状态(redux存储)来自根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减速机就在那里.所以这就是为什么在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’类型的每个操作上,它将返回一个带有新待办事项的新状态：

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

这是actions/index.js内的动作创建者：

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

所以这里是redux的完整流程(我省略了调用动作的按钮,因为我认为这对你来说是显而易见的部分).
好吧,几乎是一个完整的流程,如果没有包含应用程序并在index.js注入商店的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状态改变时,调用mapStateToProps将返回新的映射道具. connect将传递这些新的道具,这将触发一个新的渲染调用(实际上是整个反应生命周期流)到连接的组件.这样,UI将使用来自商店的新数据重新呈现.