Redux(3) -在React中使用

react对redux进行了简单封装 react-redux
当我们要用react-redux时、我们可以安装

npm i react-redux

里面提供了Provider
同时也要安装redux
我们可以引入import {Provider} from "react-redux"

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));

或者在app.js使用

在组件中使用时、可以通过react-redux中的connect进行关联redux中的数据

这里先写一个connect.js（先看看、在下面案例中会使用）

import { connect } from 'react-redux'

const mapState = (state) => {         //用来得到redux中的数据 
  return {
    count: state.count      
  }
}

const mapDispatch = (dispatch) => {   //这里的mapDispatch可以自己起名
  return {
    'incre': (data) => {         //这里可以理解为、组件使用connect后、先进来这里的函数再派发给reducer
     dispatch({type:’increment‘}))
    },
   'decre': () => {
      dispatch({type:'decrement'})
    }
  }
}
export default connect(mapState, mapDispatch); //这里是暴露给组件使用方法

接下来在一个计数器的案例演示redux使用
在store.js中

import { createStore } from 'redux'
import reducer from './reducer'

const store = createStore(reducer)


export default store;

在reducer.js中

const countState = {
  count: 1
}


const reducer = (state = countState, action) => {

  switch (action.type) {     //这里type必须与派发的type名字相同
    case 'increment':
      return {
        count: state.count + 1
      }
      break;
    case 'decrement':
      return {
        count: state.count - 1
      }
      break;
    default:
      return state;
  }
}

export default reducer;

在Button组件中

import React, { Component } from 'react'
import connect from './connect';

class Button extends Component {

  handleClick = () => {
    console.log(this.props.type)
    if (this.props.type === "increment") {
      this.props.incre();     //判断传来的type调用connect中的对应方法
 
    } else {
      this.props.decre();
    }
  }

  render() {
    return (
      <button onClick={this.handleClick}>{this.props.children}</button>
    )
  }

  componentDidMount() {
    console.log('button', this.props)
  }
}

export default connect(Button);

Count组件中

import React, { Component } from 'react'
import Button from "./Button"
import connect from "./connect"

class Count extends Component {
    render() {
        return (
            <div>
                <Button type="decrement">-</Button>   //通过type传到Button组件
                    {this.props.count}
                <Button type="increment">+</Button>
            </div>
        )
    }

    componentDidMount(){
        console.log(this.props)
    }
}

export default connect(Count)

在这里总结下上面计数器的流程

1. 创建store
2. 创建reducer.js来更新数据
3. 通过connect把组件和redux创建联系
4. 通过点击Count中的按钮、传给Button组件type、再根据type执行对应的connect方法
5. 在connect方法中、执行对应的reducer方法、修改对应的数据
6. 想要使用redux中数据、通过connect中的mapState获取数据

至此完成一个简单的计数器使用redux案例
在redux中还会有异步数据、将在接下来博客中讲到