react-redux的简单使用

简介

redux为react提供的一个专用库
react-redux组成：

1. UI组件（presentational component）

   • 只负责ui的呈现，不带有任何业务逻辑
   • 没有状态（不使用this.state这个变量）
   • 所有数据都由参数（this.props）提供
   • 不使用任何Redux的API

2. 容器组件（container component）

   • 负责管理数据和业务逻辑，不负责UI的呈现
   • 带有内部状态
   • 使用Redux的API

安装

npm i react-redux –save

配合redux使用

npm i redux –save

使用

全局配置

利用<Provider>组件来实现容器组件获取state对象
在src下的index.js全局进行配置

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from 'react-redux'
import store from './store'
const app = (
    <Provider store={store}>    // 让App所有的子组件都默认获取到了state
        <App/>
    </Provider>
)
//ReactDOM.render(<App />,document.getElementById('root'));
ReactDOM.render(app,document.getElementById('root'));

组件配置

connect方法用于从UI组件生成容器组件。
在组件内部引入connect方法

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

// 将app转化为UI组件的形式进行展示
const App = (props)=>{
  let {inputValue,add,list,changeInput} = props // 从属性中获取到方法和对象
    return (
      <div>
        <input type="text" placeholder={inputValue} onChange={changeInput} />
        <button onClick={add}>提交</button>
        <ul>
          {
            list.map((item, index) => {
              return <li key={index}>{item}</li>
            })
          }
        </ul>
      </div>
    );
}

connect方法接收两个参数：

1. mapStateToProps
2. mapDispatchToProps
   它们定义了ui组件的业务逻辑
   前者负责输入逻辑 => state映射到ui组件的参数（props）
   后者负责输出逻辑 => 用户对ui组件的操作映射成Action

// 映射关系
const stateToProps = (state) => {
  return {
    inputValue: state.inputValue,
    list: state.list
  }
}
const dispatchToProps = (dispatch)=>{
  return {
    changeInput(e){
      let action = {
        type: 'changeInput',
        value: e.target.value
      }
      dispatch(action)
    },
    add(){
      let action = {
        type: 'add'
      }
      dispatch(action)
    }
  }
}
export default connect(stateToProps, dispatchToProps)(App);