react、react-router、redux 也許是最佳小實踐2

AaronYuan 發(fā)布于2019-08-20 17:06 / 2350人閱讀

摘要：上一篇也許是最佳小實踐加入在組件之間流通數(shù)據(jù)更確切的說，這被叫做單向數(shù)據(jù)流數(shù)據(jù)沿著一個方向從父組件流到子組件。這個將這個新的對象附加到上，并將它返回，用來更新。這一次，將當(dāng)前的狀態(tài)仍舊是空數(shù)組和對象一起傳遞給了。

上一篇：react、react-router、redux 也許是最佳小實踐1

加入 redux

React 在組件之間流通數(shù)據(jù).更確切的說，這被叫做“單向數(shù)據(jù)流”——數(shù)據(jù)沿著一個方向從父組件流到子組件。由于這個特性，對于沒有父子關(guān)系的兩個組件之間的數(shù)據(jù)交流就變得不是那么顯而易見。這里 Redux 就排上用場了。Redux提供了一個解決方案，通過將應(yīng)用程序所有的狀態(tài)都存儲在一個地方，叫做“store”。然后組件就可以“dispatch”狀態(tài)的改變給這個store，而不是直接跟另外的組件交流。所有的組件都應(yīng)該意識到狀態(tài)的改變可以“subscribe”給store。如下圖:

原理講完，下面開始加入代碼。
先看看一個小例子。

開始之前，需要先用 Redux.createStore() 創(chuàng)建一個store，然后將所有的reducer作為參數(shù)傳遞進(jìn)去，讓我們看一下這個只傳遞了一個reducer的小例子：

var userReducer = function(state, action) {
  if (state === undefined) {
    state = [];
  }
  if (action.type === "ADD_USER") {
    state.push(action.user);
  }
  return state;
}

var store = Redux.createStore(userReducer);

store.dispatch({
  type: "ADD_USER",
  user: {name: "xiaoming"}
});

上面的程序干了些什么呢：

這個store只由一個reducer創(chuàng)建。

這個reducer 初始化狀態(tài)的時候使用了一個空數(shù)組。*

在被分派的這個action里面使用了新的user對象。

這個reducer將這個新的user對象附加到state上，并將它返回，用來更新store。

*在這個例子里reducer實際上被調(diào)用了兩次 —— 一次是在創(chuàng)建store的時候，一次是在分派action之后。

當(dāng)store被創(chuàng)建之后，Redux立即調(diào)用了所有的reducer，并且將它們的返回值作為初始狀態(tài)。第一次調(diào)用reducer傳遞了一個 undefined 給state。經(jīng)過reducer內(nèi)部的代碼處理之后返回了一個空數(shù)組給這個store的state作為開始。

所有的reducer在每次action被分派之后都會被調(diào)用。因為reducer返回的狀態(tài)將會成為新的狀態(tài)存儲在store中，所以 Redux總是希望所有的reducer都要返回一個狀態(tài)。

在這個例子中，reducer第二次的調(diào)用發(fā)生在分派之后。記住，一個被分派的action描述了一個改變狀態(tài)的意圖，而且通常攜帶有數(shù)據(jù)用來更新狀態(tài)。這一次，Redux將當(dāng)前的狀態(tài)（仍舊是空數(shù)組）和action對象一起傳遞給了reducer。這個action對象，現(xiàn)在有了一個值為1ADD_USER的type屬性, 讓reducer知道怎樣改變狀態(tài)。

正式redux登場

在 src 下面創(chuàng)建一個 redux、actions、 data(存放一些初始數(shù)據(jù))文件夾，然后在 data文件夾下面創(chuàng)建一個db.js，這個文件寫上一些初始的數(shù)據(jù):

src/data/db.js

const data = [
    {
        id: 1,
        title: "明天要去打醬油",
        content: "系呀系呀我們一起打醬油"
    },
    {
        id: 2,
        title: "周末去書吧讀書",
        content: "書籍是人類進(jìn)步的階梯"
    },
    {
        id: 3,
        title: "備份一下數(shù)據(jù)庫",
        content: "備份服務(wù)器的數(shù)據(jù)庫，一般都是分開的，分布式數(shù)據(jù)庫"
    },
    {
        id: 4,
        title: "周五記得把被子洗了",
        content: "洗杯子被子被子被子"
    },
    {
        id: 5,
        title: "計劃五",
        content: "計劃五內(nèi)容"
    }
]

export default data

好了，初始的數(shù)據(jù)我們有了，下面就是創(chuàng)建 store 了，在redux文件夾下面，創(chuàng)建一個planlist.js文件，這個文件就是操作 store 的動作 action集合處理的數(shù)據(jù)，這時候我們會去action文件夾下面新建，action-type.js 和plan.js,代碼如下：

src/action/action-type.js

export const ADD = "ADD";
export const DELECT = "DELECT";
export const SHOW = "SHOW";

src/action/plan.js

import * as types from "./action-type.js";
// 添加計劃
export function addPlan(item) {
  return {
    type: types.ADD,
    item
  };
}
// 刪除計劃
export function deletePlan(id) {
  return {
    type: types.DELECT,
    id
  };
}
// 顯示隱藏彈層
export function show(show) {
  return {
    type: types.SHOW,
    show
  };
}

action 我們都定義好了現(xiàn)在我們就可以改變 store了。寫好我們的 reducer

src/redux/planlist.js

import * as types from "../actions/action-type.js";
import data from "../data/db.js"
const initialState = {
  show: false, // 是否顯示彈出
  planlist: data // 初始的計劃表
};

const planReducer = function(state = initialState, action) {
    let list = state.planlist;
  switch(action.type) {
    // 添加計劃
    case types.ADD:
        list.push(action.item);
      return Object.assign({}, state, { planlist: list });
    // 刪除計劃
    case types.DELECT:
      let newstate = list.filter((item) => item.id != action.id);
      return Object.assign({}, state, { planlist: newstate });;
     // 顯示、隱藏彈出層
     case types.SHOW:
         return Object.assign({}, state, { show: action.show });
  }
  return state;

}

export default planReducer;

在redux 下面再創(chuàng)建reducers.js和store.js，

src/redux/reducers.js

import { combineReducers } from "redux";

// Reducers
import planlist from "./planlist";

// Combine Reducers
var reducers = combineReducers({
    planlist: planlist
});

export default reducers;

src/redux/store.js

import { createStore } from "redux";
import reducers from "./reducers.js";

const store = createStore(reducers);
export default store;

這會我們的 store 就完全的創(chuàng)建好了，下面就是把 store 跟我們的組件，完全的結(jié)合起來。這就用到 react-redux 的 connect 模塊。
這個東西就是把組件跟 store 連接起來的模塊。

然后在，App.js加入我們的。store

src/App.js

import React, { Component } from "react"
import {
  BrowserRouter as Router,
  Route,
  Link
} from "react-router-dom"
// 引入 store
import { Provider, connect } from "react-redux";
import store from "./redux/store.js"
import logo from "./logo.svg"
import Plan from "./components/plan.js"
import Home from "./components/home.js"
import Popup from "./components/pupop.js"
import TestRouter from "./components/testrouter.js"
import Detail from "./components/detail.js"
import "./App.css"
import "./components/comment.css"
import createHistory from "history/createBrowserHistory"
const history = createHistory()
class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
        // store的掛載
       
        
            
              
              Welcome to React Plan
            
            
              
                 
                    
                      首頁
                      計劃表
                      二級路由
                    
                     
                      
                      
                      
                      
                    
                
              
            
            
        
      
    );
  }
}

export default App

然后在 plan.js連接 store

src/component/plant.js

import React, { Component } from "react"
import { connect } from "react-redux";
import store from "../redux/store.js";
// 引入 定義的 action
import {show, deletePlan} from "../actions/plan.js";

class Plan extends Component {
  constructor(props) {
      super(props);
  }
  // 顯示彈出
  show () {
    let b = this.props.planlist.show;
    store.dispatch(show(!b));
  }
  // 刪除計劃
  delete (id) {
      store.dispatch(deletePlan(id));
  }
  // js 跳轉(zhuǎn)路由
  detail (id) {
      this.props.history.push(`/detail/${id}`)
  }
    render () {
        return (
            
                
                    計劃表
                    添加計劃
                
                
                        {
                            this.props.planlist.planlist.map((item, index) => {
                                return (
                                    
                                )
                            })
                        }
                    
                    
                        
                            標(biāo)題
                            操作
                        
                    
                    
                                        {item.title}
                                        刪除
                                    
                
            
        )
    }
}

const mapStateToProps = function(store) {
  return {
    planlist: store.planlist
  };
};
// 連接 store，作為 props
export default connect(mapStateToProps)(Plan);

標(biāo)題	操作
{item.title}	刪除

同理下面的 js，都是用這個模塊連接

src/component/detail.js

import React, { Component } from "react"
import { connect } from "react-redux";
import store from "../redux/store.js";


class Detail extends Component {
    constructor(props) {
        super(props);
        // 根據(jù)路由 id 跟 store 做過濾
        let item = props.planlist.planlist.filter((data) => data.id == props.match.params.id)
        console.log(item)
        this.state = {
            plan: item[0]
        }
    }
    render() {
        return (
            
                計劃詳情
                id： {this.state.plan.id}
                標(biāo)題： {this.state.plan.title}
                內(nèi)容： {this.state.plan.content}
            

        )
    }
}


const mapStateToProps = function(store) {
  return {
    planlist: store.planlist
  };
};
// 連接 tore 和組件
export default connect(mapStateToProps)(Detail);

src/component/popup.js

import React, { Component } from "react"
import { connect } from "react-redux";
import store from "../redux/store.js";
import {show, addPlan} from "../actions/plan.js";

class Pupop extends Component{
  constructor (props) {
    super(props)
    this.state = {
      id: "",
      title: "1",
      content: "1"
    }
  }
  // 取消按鈕操作
  close () {
    let b = this.props.planlist.show;
    this.setState({
      id: "",
      title: "",
      content: ""
    })
    store.dispatch(show(!b));
  }
  // 輸入框事件
  handleChage (str, e) {
    this.setState({
      id: Math.ceil(Math.random()*10000),
      [str]: e.target.value
    })
  }
  // 確認(rèn)操作
  conform () {
    store.dispatch(addPlan(this.state));
    this.setState({
      id: "",
      title: "",
      content: ""
    })
    this.close();
  }

  render() {
    let self = this;
    return (
      
        
          X
          
            計劃標(biāo)題
            
          
          
            計劃內(nèi)容
            
          
          
            取消
            確認(rèn)
          
        
      
    )
  }
}

const mapStateToProps = function(store) {
  return {
    planlist: store.planlist
  };
};
// 連接 store和組件
export default connect(mapStateToProps)(Pupop);

完工。github地址

GPU云服務(wù)器云服務(wù)器 react-router react-router4 react-redux React_Redux_Appointm

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83408.html

發(fā)表評論

登陸后可評論

0條評論

AaronYuan

男|高級講師

我要關(guān)注我要私信

TA的文章

10分鐘了解Jmeter性能測試工具，懂事的已經(jīng)點進(jìn)來看了

閱讀 1369·2021-11-15 11:45
C語言實現(xiàn)通訊錄

閱讀 3136·2021-09-27 13:36
前端每日實戰(zhàn)：139# 視頻演示如何用 CSS 和 D3 創(chuàng)作光斑粒子交相輝映的動畫

閱讀 2880·2019-08-30 15:54
轉(zhuǎn)載：瀏覽器常見兼容問題以及解決辦法

閱讀 999·2019-08-29 12:38
剖析簡易計算器帶你入門微信小程序開發(fā)

閱讀 2920·2019-08-29 11:22
js 調(diào)用棧機(jī)制與ES6尾調(diào)用優(yōu)化介紹

閱讀 2999·2019-08-26 13:52
vue權(quán)限問題

閱讀 2043·2019-08-26 13:30
Vue+Typescript中在Vue上掛載axios使用時報錯

閱讀 599·2019-08-26 10:37

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

react、react-router、redux 也許是最佳小實踐2

Welcome to React Plan

計劃表

計劃詳情

計劃標(biāo)題

計劃內(nèi)容

相關(guān)文章

react、react-router、redux 也許是最佳小實踐1

React.js 最佳實踐（2016）_鏈接修正版

**TypeScript 3.0 + React + Redux 最佳實踐**

發(fā)表評論

0條評論

AaronYuan

男|高級講師

TA的文章

10分鐘了解Jmeter性能測試工具，懂事的已經(jīng)點進(jìn)來看了

C語言實現(xiàn)通訊錄

前端每日實戰(zhàn)：139# 視頻演示如何用 CSS 和 D3 創(chuàng)作光斑粒子交相輝映的動畫

轉(zhuǎn)載：瀏覽器常見兼容問題以及解決辦法

剖析簡易計算器帶你入門微信小程序開發(fā)

js 調(diào)用棧機(jī)制與ES6尾調(diào)用優(yōu)化介紹

vue權(quán)限問題

Vue+Typescript中在Vue上掛載axios使用時報錯

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

react、react-router、redux 也許是最佳小實踐2

Welcome to React Plan

計劃表

計劃詳情

計劃標(biāo)題

計劃內(nèi)容

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

react、react-router、redux 也許是最佳小實踐2