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

 

posted @ 2019-03-22 07:04  wzndkj  阅读(282)  评论(0编辑  收藏  举报