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

巴特西

如何使用react-redux

最新文章

热门文章