摘要：在上已經有接近的數了，是目前最熱門的前端框架。惟一改變的辦法是觸發，一個描述發生什么的對象。對對象的任何修改或添加刪除操作都會返回一個新的對象。從導入需要的類型初始化狀態就是一個純函數，接收舊的和，返回新的。

React在Github上已經有接近70000的 star 數了，是目前最熱門的前端框架。而我學習React也有一段時間了，現在就開始用 React+Redux 進行實戰！

React 實踐項目 （一）

本次實踐代碼

部署好的網址

應用中所有的 state 都以一個對象樹的形式儲存在一個單一的 store 中。
惟一改變 state 的辦法是觸發 action，一個描述發生什么的對象。
為了描述 action 如何改變 state 樹，你需要編寫 reducers。

我們接下來開始開始進行登陸與注冊的狀態管理

首先在 src 目錄下創建 redux 文件夾，目錄如下

digag
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── components
        └── Index
            └── Header.js
            └── LoginDialog.js
            └── RegisterDialog.js
    └── containers
        └── App
            └── App.js
            └── App.css
    └── redux
        └── action
            └── users.js
        └── reducer
            └── auth.js
            └── users.js
        └── sagas
            └── api.js
            └── sagas.js
            └── selectors.js.js
            └── users.js
        └── store
            └── store.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

代碼可從此獲取

記得在 package.json 中更新依賴

action
action/users.js

/*
 * action 類型
 */
export const REGISTER_USER = "REGISTER_USER";
// 省略其他action 類型

/*
 * action 創建函數
 */
export const registerAction = (newUser) => {
  return{
    type:REGISTER_USER,
    data: newUser,
  }
};
// 省略其他 action 創建函數

reducer
reducer/users.js

//Immutable Data 就是一旦創建，就不能再被更改的數據。
//對 Immutable 對象的任何修改或添加刪除操作都會返回一個新的 Immutable 對象。
import Immutable from "immutable";
//從 action 導入需要的 action 類型
import {REGISTER_USER, REGISTER_USER_SUCCESS, REGISTER_USER_FAILURE} from "../action/users";

// 初始化狀態
const initialState = Immutable.fromJS({
  newUser: null,
  error: null,
  saveSuccess: false,
});

//  reducer 就是一個純函數，接收舊的 state 和 action，返回新的 state。
export const users = (state = initialState, action = {}) => {
  switch (action.type) { // 判斷 action 類型
    case REGISTER_USER:  
      return state.merge({   // 更新狀態
        "newUser": action.data,
        "saveSuccess": false,
        "error": null,
      });
    case REGISTER_USER_SUCCESS:
      return state.set("saveSuccess", action.data);
    case REGISTER_USER_FAILURE:
      return state.set("error", action.data);
    default:
      return state
  }
};

store
store/store.js

import {createStore, combineReducers, applyMiddleware } from "redux";
import createSagaMiddleware from "redux-saga"
import * as reducer from "../reducer/users";

import rootSaga from "../sagas/sagas";

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  combineReducers(reducer),
  applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(rootSaga);

export default store;

src/index.js

import {Provider} from "react-redux";
import store from "./redux/store/store";
// 省略其他

ReactDOM.render(
  
    
  , document.getElementById("root")
);

import {registerAction, loginAction} from "../../redux/action/users";
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
 //省略其他

class App extends Component {

  render(){
    return(
      

        //省略
      
    )
  }

}

export default connect(
  (state) => {
// 獲取狀態   state.users  是指 reducer/users.js 文件中導出的 users
// 可以 `console.log(state);` 查看狀態樹
  return { users: state.users }
},
  (dispatch) => {
  return {
// 創建action
    registerActions: bindActionCreators(registerAction, dispatch),
    loginActions: bindActionCreators(loginAction, dispatch),
  }
})(App);
// 在App 組件的props里就有 this.props.users  this.props.registerActions this.props.loginActions 了
// 需要注意的是這里this.props.users是Immutable 對象，取值需要用this.props.users.get("newUser") 
// 也可在 reducer 里改用 js 普通對象

裝飾器版本：
需要在Babel中開啟裝飾器
裝飾器插件babel-plugin-transform-decorators-legacy

@connect(
  (state) => {
    console.log(state);
    return ({
      users: state.users,
    });
  },
  {registerActions: registerAction, loginActions: loginAction}
)

src/components/Index/RegisterDialog.js

// 省略其他代碼
 handleSubmit = (e) => {
    e.preventDefault();
    // 驗證表單數據
    this.refs.user.validate((valid) => {
      if (valid) {
        // this.state.user 為表單收集的 用戶注冊數據
        this.props.registerActions(this.state.user);
        this.setState({loading: true});
      }
    });
  };

調用 action

`this.props.registerActions(this.state.user);`
 返回action 為 

{
    type:REGISTER_USER,
    data: this.state.user,
}

reducer 根據action類型更新狀態

switch (action.type) {
    case REGISTER_USER:
      return state.merge({
        "newUser": action.data,
        "saveSuccess": false,
        "error": null,
      });
//省略其他代碼

這時我們的store里的狀態 newUser 就被更新為 注冊彈窗里收集的數據
到這里都還是同步的action，而注冊是一個異步的操作。
下篇文章會介紹如何使用 redux-saga 進行異步操作。
redux-saga 已經在使用了，有興趣的可以自行查看代碼理解。

記得點star：）
項目代碼地址：https://github.com/DigAg/diga...
vue2版項目代碼地址：https://github.com/DigAg/diga...
相應后端項目代碼地址：https://github.com/DigAg/diga...