摘要：之前寫了一篇沒有加入的的小博文。一拆分結(jié)構(gòu)根據(jù)自己的習(xí)慣和固定套路，拆分目錄結(jié)構(gòu)和組件結(jié)構(gòu)。把的導(dǎo)航組件集中放在純粹是個人習(xí)慣。二代碼實(shí)現(xiàn)入口文件是用來做的數(shù)據(jù)持久化。添加事項(xiàng)后要通知其他組件更新數(shù)據(jù)。

這個項(xiàng)目是第一次使用Redux的實(shí)例，并不具有專業(yè)性的理論知識。純粹分享一次開發(fā)過程與心得。之前寫了一篇沒有加入Redux的React Native ToDoList的小博文。這個項(xiàng)目也是在原來的基礎(chǔ)上進(jìn)行裝修完成的。目的是為了體驗(yàn)一下高深莫測的Redux。
總之，在各位網(wǎng)友的友情支持下，我依然沒有看懂redux數(shù)據(jù)流的走向，勉勉強(qiáng)強(qiáng)通了一點(diǎn)。

根據(jù)自己的習(xí)慣和固定套路，拆分目錄結(jié)構(gòu)和組件結(jié)構(gòu)。

├── public
├── todos-redux 
│?? ├── actions                             
│?? │?? └── index.js             
│?? ├── components
│?? │?? ├── todoItem.js
│?? │?? └── todoList.js
│?? ├── containers
│?? │?? ├── add.js
│?? │?? ├── all.js
│?? │?? ├── completed.js
│?? │?? └── incomplete.js
│?? ├── reducers
│?? │?? ├── index.js
│?? │?? └── todos.js
│?? ├── store                             
│?? │?? └── configureStore.js 
│?? ├── utils                             
│?? │?? └── utils.js 
│?? ├── index.js
│?? ├── router.js

把react-navigation的導(dǎo)航組件集中放在router.js純粹是個人習(xí)慣。
components中的組件是展示組件，不直接使用Redux。而containers中的是直接使用 Redux的組件。在這里可以看成components是containers的子組件。

redux-persist是用來做redux的數(shù)據(jù)持久化。使用方法直接參考在GitHub上的基本示例。這里的代碼基本上都是固定套路。

// index.js
import React, {Component} from "react"
import { Provider } from "react-redux"
import { TodosReduxStack } from "./router"

import { PersistGate } from "redux-persist/integration/react"
import configureStore from "./store/configureStore"
const { persistor, store } = configureStore()
export default class TodolistRedux extends Component {
  render(){
    return (
      
        
          
          
      
    )
  }
}

// action/index.js
import Utils from "../utils/utils"

export const addTodo = (text) => {
  return {
    type: "ADD_TODO",
    id: Utils.uniqueId(),
    content: text
  }
}

export const toggleTodo = (id) => {
  return{
    type:"TOGGLE_TODO",
    id
  }
}

// reducers/todos.js
var initState = [];
const todos = (state = initState, action)=>{
  switch(action.type){
    case "ADD_TODO":
      return[
        ...state,
        {
          id: action.id,
          content: action.content,
          completed: false
        }
      ]
    case "TOGGLE_TODO":
      return state.map((t) => {
         if (t.id !== action.id) {
          return t
         } 
         return Object.assign({},t,{completed:!t.completed})
        })
      
    default:
      return state
  }
}

export default todos

connect()() 這個寫法叫函數(shù)的柯里化，漲知識啦。

// containers/all.js
const mapStateToprops = (state) => {
  return {
    todos: state.todos
  }
}

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

export default connect(mapStateToprops, mapDispatchToProps)(AllScreen)

使用filter函數(shù)過濾數(shù)組，返回指定的值，這個地方有點(diǎn)雞肋哈，但是我不會其他的寫法了。

// containers/completed.js
const mapStateToprops = (state) => {
  return {
    todos: state.todos.filter(t => t.completed)
  }
}

沒有使用Redux之前，項(xiàng)目使用了React Native內(nèi)置的DeviceEventEmitter方法。添加事項(xiàng)后要通知其他組件更新數(shù)據(jù)。還大量使用了AsyncStorage做數(shù)據(jù)的持久化，每一次的數(shù)據(jù)更新都需要用到它。如果是在稍復(fù)雜的項(xiàng)目中這樣寫，會死翹翹的！使用Redux 和 redux-persist 可以輕松實(shí)現(xiàn)這個功能，效果是明顯的。在已完成頁面將事項(xiàng)切換為未完成，該事項(xiàng)會直接消失，跑到未完成頁面中，這個地方并不需要做額外的處理。

這種連個圖都沒有也沒有深入講解redux的文字都敢發(fā)出來，真的是表臉 （手動滑稽）。
完整的項(xiàng)目在這里GitHub Todos Redux。