摘要：在上已經(jīng)有接近的數(shù)了，是目前最熱門的前端框架。惟一改變的辦法是觸發(fā)，一個(gè)描述發(fā)生什么的對象。對對象的任何修改或添加刪除操作都會(huì)返回一個(gè)新的對象。從導(dǎo)入需要的類型初始化狀態(tài)就是一個(gè)純函數(shù)，接收舊的和，返回新的。

React在Github上已經(jīng)有接近70000的 star 數(shù)了，是目前最熱門的前端框架。而我學(xué)習(xí)React也有一段時(shí)間了，現(xiàn)在就開始用 React+Redux 進(jìn)行實(shí)戰(zhàn)！

React 實(shí)踐項(xiàng)目 （一）

本次實(shí)踐代碼

部署好的網(wǎng)址

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

我們接下來開始開始進(jìn)行登陸與注冊的狀態(tài)管理

首先在 src 目錄下創(chuàng)建 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 創(chuàng)建函數(shù)
 */
export const registerAction = (newUser) => {
  return{
    type:REGISTER_USER,
    data: newUser,
  }
};
// 省略其他 action 創(chuàng)建函數(shù)

reducer
reducer/users.js

//Immutable Data 就是一旦創(chuàng)建，就不能再被更改的數(shù)據(jù)。
//對 Immutable 對象的任何修改或添加刪除操作都會(huì)返回一個(gè)新的 Immutable 對象。
import Immutable from "immutable";
//從 action 導(dǎo)入需要的 action 類型
import {REGISTER_USER, REGISTER_USER_SUCCESS, REGISTER_USER_FAILURE} from "../action/users";

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

//  reducer 就是一個(gè)純函數(shù)，接收舊的 state 和 action，返回新的 state。
export const users = (state = initialState, action = {}) => {
  switch (action.type) { // 判斷 action 類型
    case REGISTER_USER:  
      return state.merge({   // 更新狀態(tài)
        "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) => {
// 獲取狀態(tài)   state.users  是指 reducer/users.js 文件中導(dǎo)出的 users
// 可以 `console.log(state);` 查看狀態(tài)樹
  return { users: state.users }
},
  (dispatch) => {
  return {
// 創(chuàng)建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();
    // 驗(yàn)證表單數(shù)據(jù)
    this.refs.user.validate((valid) => {
      if (valid) {
        // this.state.user 為表單收集的 用戶注冊數(shù)據(jù)
        this.props.registerActions(this.state.user);
        this.setState({loading: true});
      }
    });
  };

調(diào)用 action

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

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

reducer 根據(jù)action類型更新狀態(tài)

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

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

記得點(diǎn)star：）
項(xiàng)目代碼地址：https://github.com/DigAg/diga...
vue2版項(xiàng)目代碼地址：https://github.com/DigAg/diga...
相應(yīng)后端項(xiàng)目代碼地址：https://github.com/DigAg/diga...