React-Redux笔记

React-Redux笔记

React-Redux是Redux的官方针对React开发的扩展库，默认没有在React项目中安装，需要手动来安装。react-redux是依赖于redux，所以你必须安装redux

你可以理解为react-redux就是redux给我们提供一些高阶组件，能解决的问题是：使用它以后我们不需要在每个组件中再去手动订阅数据的更新了。

安装

npm i -S react-redux  redux

配置

import { createStore } from "redux"

// 创建默认的数据源（state）
const defaultState = {
    // 初始数据
    count: 0
}

// 负责处理数据
function reducer(state = defaultState, action) {
    // 返回新的state数据
    return state
}

// 创建仓库
const store = createStore(reducer)

// 导出
export default store

使用

• 根组件

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
//此处的Provider让全局的组件共享store中的数据
import store from './store'
import App from './App'
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

• 子组件

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

@connect//props可以获取用connect包裹的redux内容
class App extends Component {
  render() {
  console.log("Count prpos",this.props);
    return (
      <div>
        <h3>{this.props.num}</h3>
        <button onClick={() => this.props.add()}>累加NUM</button>
      </div>
    )
  }
}

export default App

• 子组件的connect文件

import { connect } from 'react-redux' // 使用react-redux 数据变成响应式 修改数据不用再手动更新视图了
import countAction from '@/store/actionCreators/countAction'
/*countAction文件内容 用于存放命令
export default (dispatch) => ({
  add(n = 1) {
    dispatch({ type: "count_add_num", payload: n });
  }
});

*/
const mapDispatchToProps = dispatch => (//因为要返回的是组件 所以用()包裹
  {...countAction(dispatch)}  
)

//使用高阶组件 connect 将redux中的 state 和actions 映射到当前组件的props中
export default connect(state => {//connect 相当于vuex中的models 此处得到了引入的全部reducer（每一个模块）
 console.log(state);
  return state.count
} , mapDispatchToProps)