react+redux從零開始

這次帶給大家react redux從零開始，react redux從零開始的注意事項有哪些，以下就是實戰案例，一起來看一下。

環境準備

為了方便，這裡使用create-react-app來建立react環境

create-react-app mydemo

彈出設定

如果需要自訂react的配置，需要執行下面的指令把設定檔彈出來。

npm run eject

安裝redux

npm i redux --save

簡單理解

redux簡單用法就是透過它的store來訂閱和發布訊息。

透過subscribe來訂閱action，透過dispatch來觸發action。 reducer中定義來各個action要做的事情。

demo程式碼

reducer定義

const Add = 'addGirl', Remove = "removeGirl";
export function reducer(state = 0, action) {
  switch (action.type) {
    case Add:
      return state + 1;
    case Remove:
      return state - 1;
    default:
      return 10;
  }
}
//action creator,把action封装成一个方法，这样用的时候不用每次定义，避免出错
export function addCreator() {
  return { type: Add };
}
export function removeCreator() {
  return { type: Remove };
}
export function addAsync() {
  return (dispatch, getState) => {
    setTimeout(function () {
      dispatch(addCreator());
    }, 1000);
  }
}

入口檔index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore } from 'redux';
import thunk from 'redux-thunk';
import { reducer,addCreator,removeCreaator } from './index.redux';
import { Provider } from 'react-redux'
const store = createStore(reducer);
function render() {
  ReactDOM.render(
    <App store={store} addCreator={addCreator} removeCreator={removeCreator} />,
    document.getElementById('root')
  );
}
//封装成方法，方便下面的store的订阅调用
render();
//每当dispatch时，订阅的函数就会执行
store.subscribe(render);
registerServiceWorker();

App.js

import React, { Component } from 'react';
import './App.css';
class App extends Component {
 render() {
  var store=this.props.store;
  var num=store.getState();
  return (
   <p className="App">
    <h1>现在有机关枪{this.props.num}把。</h1>
    <button onClick={() => { store.dispatch(this.props.addCreator()) }}>add</button>
    <button onClick={() => { store.dispatch(this.props.removeCreator()) }}>remove</button>
   </p >
  );
 }
}
export default App;

透過store的dispatch來觸發action，index.js中訂閱的事件就會執行。

redux的非同步執行

redux中如果需要執行非同步操作，需要安裝react-thunk外掛

npm i react-thunk --save

同時需要redux外掛程式的applyMiddleware

關鍵程式碼

設定其實很簡單，創建store時，把thunk傳遞給它就行了。

import thunk from 'redux-thunk';
const store = createStore(reducer, applyMiddleware(thunk));

在app.js中增加一個觸發非同步操作的按鈕，reducer中已經定義了一個非同步的方法。

export function addAsync() {
  return (dispatch, getState) => {
    setTimeout(function () {
      dispatch(addCreator());
    }, 1000);
  }
}

非同步呼叫方法會傳回一個有兩個參數的方法，兩個參數都是函數，第一個是dispatch函數，第二個是getState函數。
dispatch觸發action，getState取得state的值。

在app.js中增加程式碼

<button onClick={() => { store.dispatch(this.props.addAsync()) }}>addAsync</button>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何使用React diff演算法

#怎麼對vue專案api介面進行管理

以上是react+redux從零開始的詳細內容。更多資訊請關注PHP中文網其他相關文章！