redux---模块化管理

redux的模块化

上一步我们已经对state、actions进行了处理，进一步对代码进行优化：

  handleClick(){
    const action={
      type:'add_count',
      value:1
    }
    store.dispatch(action)
  }

首先是这一块，我们可以在store下面建立一个actionCreators.js,将action提取到一个文件里面去：

actionCreators.js

// 定义所有的请求

// const action={
//   type:'add_count',
//   value:1
// }

import {ADD_COUNT} from './types.js'
export const addCountAction = () =>{
  return {
    type:ADD_COUNT,
    value:1
  }
}

然后在页面App.js导入即可：

import {addCountAction} from './store/actionCreators'
  handleClick(){
    store.dispatch(addCountAction())
  }

相应地我们可以将state跟types提取出去：
state.js:

// 将数据也拆分出来
export default {
  count:1
}

type.js:

// 定义所有的请求类型

export const ADD_COUNT = 'add_count'

再在相应的页面引入就可以了。

react-redux

1.引入Provider ---->包含最大的父组件，并将store注进Provider
App.js

在页面的主入口index.js，引入：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux'
import store from './store'

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

在最大的子组件App.js内部，把constructor和所有的函数部分删除
引入：

import { connect } from 'react-redux'
// 这里相当于vuex的mapStates
const mapStateToProps = (state)=>{
  return {
    count:state.count
  }
}
// 这里相当于vuex的mapActions
const mapDispatchToProps = (dispatch)=>{
  return {
    handleClick (){
      dispatch(addCountAction())
    }
  }
  // 这两个其实也就相当于将store的内容继承过来了，那么只需要props接收调用就可以了
export default connect(mapStateToProps, mapDispatchToProps)(App)

**PS:**mapStateToProps等价于vuex里面的mapStates，mapDispatch相当与vuex内部的mapActions
其实也就是相当于直接引入了store，然后将App重新包括了一层，那么App相当于它的子组件，在App内部只需要props接收传递过来的state和action就可以了

import React, { Component } from 'react'
// import store from './store'
import Com1 from './components/com1'
import {addCountAction} from './store/actionCreators'
import { connect } from 'react-redux'

class App extends Component {
  render() {
    return (   
      <div>
        this is App
        <br />
        store里面的数据---{'>'}{this.props.count}
        <button onClick={this.props.handleClick}>+</button>
        <Com1></Com1>
      </div>
    )
  }
}
const mapStateToProps = (state)=>{
  return {
    count:state.count
  }
}
const mapDispatchToProps = (dispatch)=>{
  return {
    handleClick (){
      dispatch(addCountAction())
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App)