小菜鳥看redux

maqunboy發表於2018-07-12
Redux

引言

這是一個基礎的教程。希望可以通過這個教程，讓很多初學 Redux 這個工具的小夥伴可以很輕鬆的上手。

在自己研究的這一過程中，主要參考了下列文章，請大家耐心的去讀一讀，有助於更系統清晰的理解 Redux:

阮一峰老師的文章： Redux 入門教程（一）：基本用法

redux 官方網站：github/examples/counter 簡單例子

理解的心酸歷程

store

說到 store , 由於之前對 vue 比較熟悉，我就類比去想象 vuex 中的 store 。回到正題，在 Redux 中僅存一個 store ，用於跟元件中繫結。

import { Provider } from 'react-redux'
import { createStore } from 'redux'

import { composeWithDevTools } from 'redux-devtools-extension'; // 這是Chrome 除錯工具，推薦安裝


const store = createStore(
	rootReducer,
	composeWithDevTools()
)

ReactDOM.render(
	<Provider store={store}>
		<App />
	</Provider>,
	document.getElementById('root')
);

複製程式碼

action

定義 action, 說白了是一個方法的集合。這些集合的方法描述了使用者的操作動作。由於 使用者 在介面上操作 DOM，實際上是在view層中不斷的做操作。js 通過呼叫這些方法來完成 action 操作。

export const addTodo = (time) => {

	return {

		type: "ADD_TODO",

		time

	}

}


export const addTodoUp = (time) => {

	return {

		type: "ADD_TODO_LIST",

		time

	}

}
複製程式碼

reducers

這裡的 reducers ，我認為相當於大腦。就好像 action 肢體上的操作，通過神經傳遞給了大腦，那麼大腦就應該對這些 action 進行操作。?下面的combineReducers 實際上起到了整合的作用，將一下細碎的 reducers 整合在一起。

import { combineReducers } from 'redux';


import user from './user.js';

import list from './list.js';



export default combineReducers({
  user,
  list
})

複製程式碼

回到元件內部

截止到現在，人已經做了動作 action, 大腦也反應了 reducers， 更改了大腦中的記憶 store, 那麼返回給肢體上的怎麼去實施呢？操作如下：

import React, { Component } from 'react';
import './App.css';

import { connect } from 'react-redux'

import { addTodo, addTodoUp } from './actions/index.js'

class App extends Component {


  _init = () => {

    let { dispatch } = this.props;

    dispatch(addTodo(3))

  }

  _init2 = () => {

    let { dispatch } = this.props;

    dispatch(addTodoUp(3))

  }

  componentDidMount () {


  }

  render() {

    let { time } = this.props;

    return (
      <div className="App">
        <p>{ time }</p>
        <button onClick={ this._init }>點選增加</button>
        <button onClick={ this._init2 }>點選增加111111</button>
      </div>
    );
  }

}

function mapStateToProps(state) {

  return { time: state.user + state.list }

}


export default connect(mapStateToProps)(App);

複製程式碼

首先需要從 actions 中去呼叫動作的方法，這一點毋庸置疑。由於我們的 store 存放在跟元件中，所以我們可以通過 this.props 獲取值。不僅僅如此，在 this.props 中，我們還能獲取到觸發 action 的關鍵字 dispatch。這裡面有幾個關鍵字需要注意下：

mapStateToProps

mapStateToProps是一個函式，用於建立元件跟 store 的 state 的對映關係 作為一個函式，它可以傳入兩個引數，結果一定要返回一個 object 。

connect

上面定義的關聯 state 和 action 的方法需要繫結到當前元件上面。

最後我想說：

不求認同，但求指正，指導。大家也可以來我的部落格站發表對文章中理解有歧義的地方提出自己的看法。

部落格地址

相關文章