redux和react-redux的使用詳解

我自己的理解redux就跟vue中的vuex差不多,都是數據管理器,話不多說,我們從經典的計數器案例開始講解

使用redux實現計數器

創建如下的react項目,我習慣把每一個模塊分塊,才有這么多文件,當然你也可以寫在一個js文件中,這不是重點

首先我們看一下項目的入口文件index.js

import 'core-js/fn/object/assign';
import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './components/Counter'; //引入計數器件
import {createStore} from 'redux'; //通過解構賦值得到createStore,為store的創建做准備
import reducer from './reducers/index' //引入reducer純函數 該函數,根據action的type不同結合舊的state返回新的state
let store = createStore(reducer); //創建redux的核心 store store我會在后面進行詳細的解答
import {numAdd,numDel} from './actions/index'; //引入action函數,觸發什么操作,就根據操作怎樣改變值

// Render the main component into the dom
//這里使用Redducer變量來定義ReactDOM中的render函數,是方便store中state更新之后,頁面的渲染
const Redducer = () =>{
  ReactDOM.render(
    <Counter     
      value={store.getState()} 
      add ={()=>store.dispatch(numAdd())}
      del ={()=>store.dispatch(numDel())}
    ></Counter>,
    document.getElementById('app')
  );
};
// value={store.getState()} 給展示組件Counter傳遞數據 這里的store.getState()得到的值,就是store創建過程中reducer純函數里面的初始state值
// ()=>store.dispatch(numAdd())和()=>store.dispatch(numDel()) 定義函數傳遞給展示組件Counter
//store.dispatch(參數)會傳遞一個對象作為參數例如{type:"add"},調用reducer純函數,實現store中的state的更新

Redducer();//該函數執行,就初始化了頁面

store.subscribe(Redducer);
//store.subscribe()用來監聽store中大的state是否發生改變,如果發生改變,就重新渲染頁面,所以才跟Redducer()進行綁定

在看純函數reducer,至於為什么redux負責state編輯的函數統稱reducer,我自己的猜測是根據es5中的reduce方法有關(純屬瞎猜測,切勿當真)

const reducer = (state=0,action)=>{
  switch (action.type){
    case 'add':
      return state+1;
    case 'del':
      return state-1;
    default:
      return state
  }
};
//定義store的state = 0,action接受的值就是store.dispatch(numAdd())中通過numAdd()函數的到的一個對象
//由於前面在得到store的時候 該函數跟redux中的createStore進行了綁定 也就是這一句代碼 let store = createStore(reducer)
//所以通過這里就可以改變store的state值,所以說現在可以的理解reducer為什么是一個純函數了吧
export default reducer;

在看actions中的導出函數

export const numAdd = ()=>{
  return{
    type:"add"
  }
};
export const numDel = ()=>{
  return{
    type:"del"
  }

}
//導出兩個函數,每一個函數返回一個包含type屬性的對象(注意ation中type是必須的,其他的屬性可以自行添加),可以通過解構賦值得到每一個
//的函數,就像入口文件index.js中的這一句代碼 import {numAdd,numDel} from './actions/index';

最后看展示組件Counter

import React from 'react';
//函數返回組件的話,就是解構賦值獲取數據
// const Counter = ({ value, add, del })=>{
//   return(
//    <div>
//      <p style={{color:'red'}}>
//        點擊次數{value}
//      </p>
//      <button onClick={add}>加一</button>
//      <button onClick={del}>減一</button>
//    </div>
//   )
// };


//class返回組件的話,就是直接獲取當前組件自身的屬性,就可以獲取到自己想要的數據
class Counter extends React.Component {
  render() {
    return (
      <div>
        <p style={{color: 'red'}}>
          點擊次數{this.props.value}
        </p>
        <button onClick={this.props.add}>加一</button>
        <button onClick={this.props.del}>減一</button>
      </div>
    )

  }
}
export default Counter;

在這里我使用了兩種方式來創建組件,第一種通過函數的方式創建的組件,要獲取在入口文件index.js中傳過來的數據,只能通過形參解構賦值的到數據,第二種通過class創建的組件只能通過組件自身的屬性,來獲取數據,當然也可以通過解構賦值來得到自己想要的數據,代碼如下

class Counter extends React.Component {
  render() {
    let {value,add,del} = this.props;
    return (
      <div>
        <p style={{color: 'red'}}>
          點擊次數{value}
        </p>
        <button onClick={add}>加一</button>
        <button onClick={del}>減一</button>
      </div>
    )

  }

 

綜上所有的代碼就可以實現了簡單的計數器的功能,這就是redux最基本的使用方法,提示:redux和reat-redux需要自己安裝,最好使用--save來安裝

 

接下來就是使用redux和react-redux來實現計數器

且看代碼

import React, { Component } from 'react' //引入react
import PropTypes from 'prop-types' //引入限制UI組件(展示組件)屬性限制
import ReactDOM from 'react-dom' //引入react-dom相關的對象
import { createStore } from 'redux' //引入redux
import { Provider, connect } from 'react-redux'//引入react配套的redux

// 創建react組件(或者是虛擬節點)
class Counter extends Component {
  render() {
    const { value, onIncreaseClick } = this.props;
    //通過解構賦值得到相應的屬性里面的值
    //在這里Counter是UI組件(展示組件)其屬性是其外面的容器組件中的state是通過react-redux中的connect操作之后傳遞過來的
    return (
      <div>
        <span>{value}</span>
        <button onClick={onIncreaseClick}>Increase</button>
        {/*通過點擊事件觸發綁定的屬性,很明顯,在這里onIncreaseClick是一個方法或者是一個對象的key值,其映射的value值是一個函數*/}
      </div>
    )
  }
}

//對展示組件中屬性各個值得類型進行限制 不合符規則會報錯
Counter.propTypes = {
  value: PropTypes.number.isRequired, //屬性對象中的value必須是number類型還有必須有值
  onIncreaseClick: PropTypes.func.isRequired //屬性對象中的onIncreaseClick必須是函數還有必須有值
};

// 這里定義的是一個action對象,我的理解就是跟vuex中actions的作用差不多,發送不同的動作名稱,通過配套其他函數的監聽
//實現容器組件的狀態(state)的改變,只不過vuex中的actions是發送動作名,redux是根據actions對象中的type的值不同,進行不同的操作

const increaseAction = { type: 'increase' };

// 定義reducer純函數,reducer函數的作用就是,根據傳過來的action和舊state的狀態值
//然后根據action的type的值進行不同的操作,進行新的state的返回,從而達到UI組件(展示組件)的重新渲染
function counter(state = { count: 0 }, action) {
  const count = state.count;
  switch (action.type) {
    case 'increase':
      return { count: count + 1 };
    default:
      return state
  }
}

// 創建store對象,可以說store是redux的核心,因為根據redux的設計理念,
//對state的操作都是根據store中的各種方法實現的,便於管理
//在這里規定使用redux中的createStore和reducer純函數結合來得到我們想要的store
const store = createStore(counter);

//mapStateToProps是connect的第一個參數
//根據名稱我們知道是把之前reducer純函數中的state(狀態)和展示組件的props(屬性)進行映射
function mapStateToProps(state) {
  return {
    value: state.count
  }
}

// mapDispatchToProps是connect的第二個參數
//根據名稱我們可以知道是把reducer純函數中之前store中的dispatch方法和展示組件的props(屬性)進行映射
function mapDispatchToProps(dispatch) {
  return {
    onIncreaseClick: () => dispatch(increaseAction)
  }
}

// 這里定義App為react-redux設計理念中的容器組件
//通過connect中傳遞參數和展示組件Counter相結合得出相應的容器組件App
//這里的容器組件App里面包含了展示組件Counter
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);

//向目標元素渲染容器組件App
//這里的組件Provider是一個react-redux中特殊的組件
//注意: 1. Provider中有且只有一個子組件(這里就是App容器組件,不一定是容器組件,根據自己的業務需求自己操作)
//      2. 使用Provider組件的好處是,只需要給Provider組件設置屬性,那么其子組件和其子組件中的子組件都可以直接使用其對應的屬性
//      3. 避免了組件嵌套之后一個一個傳遞的復雜操作
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
)

在這里就完成了redux和react-redux的結合使用,通過自己的學習,我發現了編程思想是多么的重要,我感嘆於react-redux這種思想的深度,整體感覺干凈,使得展示組件和容組件既相互分離又有一定的結合,兼職就是藕斷絲連,但是又不會違背組件分離的思想,簡直就是強大

,好了基礎的redux和react-redux的講解就到此結束了,后面我還會寫出redux異步編程的理解,畢竟現在的都是同步實現