如何使用react-redux

以前學習了react，也學習了redux，那麼react-redux是什麼呢？實際上他是一個第三方的模塊，他能夠幫助咱們在react之中更加方便的使用redux。首先若是想用react-redux，先要安裝react-redux.

 

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import { Provider } from 'react-redux';

const App = (
　　<Provider>
　　　　<TodoList />
　　</Provider>
)

ReactDOM.render(App, document.getElementById('root'));

 

咱們使用react-redux的核心api就是Provider。他的做用是什麼呢？

 

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import { Provider } from 'react-redux';
import store from './store';

const App = (
　　<Provider store={store}>
　　　　<TodoList />
　　</Provider>
)

ReactDOM.render(App, document.getElementById('root'));

 

 

加入了store，是能夠正確執行的。首先Provider這個容器鏈接了store，那麼Provider裏面全部的組件都有能力去獲取store。Provider已經把store提供給了內部全部的組件了。那麼todoList裏面去獲取store裏面的數據就不用這麼困難了。

react-redux第二個核心api就是connect。

import React, { Component } from 'react';
import { connect } from 'react-redux';

class TodoList extends Component{
　　render() {
　　　　return (
　　　　　　<div>
　　　　　　　　<div>
　　　　　　　　　　<input value={this.props.inputValue} onChange = { this.props.changeInputValue}/>
　　　　　　　　　　<button>提交</button>
　　　　　　　　</div>
　　　　　　　　<ul>
　　　　　　　　　　<li>1</li>
　　　　　　　　</ul>
　　　　　　</div>
　　　　)
　　}
}
/**
* 這個意思是讓TodoList這個組件和store進行鏈接。因此connect方法是作鏈接。
* 要鏈接就有鏈接的方式，因此第一個參數mapStateToProps
* 他的意思是TodoList與store作鏈接就有一個規則，規則在哪裏，規則在mapStateToProps裏面
*/
//mapStateToProps，把store裏面的數據映射給這個組件，並變成組件的props. 而參數state就是指store裏面的數據。
const mapStateToProps = (state) => {
　　return {
　　　　inputValue: state.inputValue
　　}
}

/***
* 我讓Todolist這個組件跟store作關聯，store裏面的數據會映射到props上面
* 同時若是我想對store的數據作修改，也能夠經過store的props來作修改
* mapDispatchToProps，dispatch，派發，把store的dispatch方法掛載到props上
*
*/
const mapDispatchToProps = (dispatch) => {
　　return {
　　　　changeInputValue(e){
　　　　　　const action = {
　　　　　　　　type: 'change_input_value',
　　　　　　　　value: e.target.value
　　　　　　}
　　　　　　dispatch(action);
　　　　}
　　}
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);