如何使用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);