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)