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

让我们从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,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将使用来自商店的新数据重新呈现.