React之React-Redux使用配合官方demo解析

一.index.js

• 用Provider包裹app主组件,并挂载store**

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './reducers'
import App from './components/App'
​
const store = createStore(rootReducer)
​
render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

二.actions/index.js

• addTodo的action使store中state增长todos子对象,id自增,type为'ADD_TODO',text为具体给出
• setVisibilityFilter使store中state中VisibilityFilter改变
• toggleTodo使store中的state中todos根据对应id值改变其completed属性
• VisibilityFilters存储要展现的todoList中的todos,根据filters值筛选须要展现的todos,如completed,all...

let nextTodoId = 0
export const addTodo = text => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text
})
​
export const setVisibilityFilter = filter => ({
  type: 'SET_VISIBILITY_FILTER',
  filter
})
​
export const toggleTodo = id => ({
  type: 'TOGGLE_TODO',
  id
})
​
export const VisibilityFilters = {
  SHOW_ALL: 'SHOW_ALL',
  SHOW_COMPLETED: 'SHOW_COMPLETED',
  SHOW_ACTIVE: 'SHOW_ACTIVE'
}

三.Reducers(用于处理Redux机制中的触发的actions,根据不一样的action.type作出不一样的响应)

1. reducers/todos.js

• 对于ADD_TODO的处理:扩充state中的todos,在todos函数中state即是指state.todos
• 对于TOGGLE_TODO的处理:对state.todos进行map处理,对正确id的item进行completed值得取反

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

2.reducers/visibilityFilter.js

• 对于SET_VISIBILITY_FILTER的action作出相应的响应,改变state的visibilityFilter为action.filter或不改变

import { VisibilityFilters } from '../actions'
​
const visibilityFilter = (state = VisibilityFilters.SHOW_ALL, action) => {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}
​
export default visibilityFilter

3.reducers/index.js

• 对于todos,visibilityFilter进行合并,generate最后的Reducers,达到对Redux中actions的监听,并改变Redux中state

import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'
​
export default combineReducers({
  todos,
  visibilityFilter
})

四.Presentational Components(表象组件:不处理Redux的内部事务,只是用来接收props,用state和props的数据驱动来达到页面效果展现)

1.components/Todo.js

• 接收父组件传递的onClick,completed,text实现todos子项展现

import React from 'react'
import PropTypes from 'prop-types'
​
const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={ {
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)
​
Todo.propTypes = {
  onClick: PropTypes.func.isRequired,
  completed: PropTypes.bool.isRequired,
  text: PropTypes.string.isRequired
}
​
export default Todo

2.components/TodoList.js

• 接收父组件的todos,toggleTodo,并循环展现Todo子组件,给Todo绑定todos中每一项的属性,和点击事件toggleTodo

import React from 'react'
import PropTypes from 'prop-types'
import Todo from './Todo'
​
const TodoList = ({ todos, toggleTodo }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => toggleTodo(todo.id)}
      />
    )}
  </ul>
)
​
TodoList.propTypes = {
  todos: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number.isRequired,
      completed: PropTypes.bool.isRequired,
      text: PropTypes.string.isRequired
    }).isRequired
  ).isRequired,
  toggleTodo: PropTypes.func.isRequired
}
​
export default TodoList

3.components/Link.js

• 接收父组件的active,children,onClick,实现button组件

import React from 'react'
import PropTypes from 'prop-types'
​
const Link = ({ active, children, onClick }) => (
  <button
     onClick={onClick}
     disabled={active}
     style={{
         marginLeft: '4px',
     }}
  >
    {children}
  </button>
)
​
Link.propTypes = {
  active: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func.isRequired
}
​
export default Link

4.components/Footer.js

• 引用容器组件的FilterLink组件,用于Footer组件的展现,并给每一个FilterLink绑定filter为actions中VisibilityFilters的值

import React from 'react'
import FilterLink from '../containers/FilterLink'
import { VisibilityFilters } from '../actions'
​
const Footer = () => (
  <div>
    <span>Show: </span>
    <FilterLink filter={VisibilityFilters.SHOW_ALL}>
      All
    </FilterLink>
    <FilterLink filter={VisibilityFilters.SHOW_ACTIVE}>
      Active
    </FilterLink>
    <FilterLink filter={VisibilityFilters.SHOW_COMPLETED}>
      Completed
    </FilterLink>
  </div>
)
​
export default Footer

5.components/App.js

• 主组件App,由三个子组件构成,分别是其余类型的组件AddTodo,表象组件Footer,容器组件VisibleTodoList

import React from 'react'
import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'
​
const App = () => (
  <div>
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>
)
​
export default App

五.Container Components(容器组件:用于处理Redux的内部事务,负责将state属性和dispatch经过connect传递给其余组件,本身自己不展现任何内容,在谷歌调试中react表现为Connect包裹)

1.containers/VisibleTodoList.js

• getVisibleTodos函数根据filter的实际值判断返回的todos应该为何类型,如:filter为all,则返回全部的todos
• mapStateToProps函数用于将state中某些属性处理事后传递给其余组件
• mapDispatchToProps用于将dispatch做为props属性传递给其余组件以便在某些事件触发时被调用
• connect将mapStateToProps,mapDispatchToProps和指定的某组件进行链接,已达到state中属性传递,以及actions经过dispatch触发Redux中的state变化的目的

import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'
import { VisibilityFilters } from '../actions'
​
const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case VisibilityFilters.SHOW_ALL:
      return todos
    case VisibilityFilters.SHOW_COMPLETED:
      return todos.filter(t => t.completed)
    case VisibilityFilters.SHOW_ACTIVE:
      return todos.filter(t => !t.completed)
    default:
      throw new Error('Unknown filter: ' + filter)
  }
}
​
const mapStateToProps = state => ({
  todos: getVisibleTodos(state.todos, state.visibilityFilter)
})
​
const mapDispatchToProps = dispatch => ({
  toggleTodo: id => dispatch(toggleTodo(id))
})
​
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

2.containers/FilterLink.js

• ownProps.filter:本组件从父组件接受到的props的filter属性 state.visibilityFilter: Redux中的state的visibilityFilter属性
• mapStateToProps:给link组件传递ownProps.filter === state.visibilityFilter后获得的boolean值,若是
• mapDispatchToProps:给link组件传递onClick,对应的是dispatch一个action,该action为setVisibilityFilter

import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
import Link from '../components/Link'
​
const mapStateToProps = (state, ownProps) => ({
  active: ownProps.filter === state.visibilityFilter
})
​
const mapDispatchToProps = (dispatch, ownProps) => ({
  onClick: () => dispatch(setVisibilityFilter(ownProps.filter))
})
​
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Link)

六.Other Components(其余类型的组件:能够负责进行本组件内容展现,同时也负责对Redux的state数据的内容展现,以及对state状态更改的处理)

1.containers/AddTodo.js

• 当form触发onSubmit时能够自行dispatch一个action,该action为addTodo

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'
​
const AddTodo = ({ dispatch }) => {
  let input
​
  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          dispatch(addTodo(input.value))
          input.value = ''
        }}
      >
        <input ref={node => input = node} />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}
​
export default connect()(AddTodo)