03 - react-redux使用及原理-01

188 阅读1分钟

react-redux

##1、理解es7的装饰器

资料: www.cnblogs.com/gavin-cn/p/…

2、使用react-redux

yarn add react-redux

关于使用

1、 需要一个 redux store

import { createStore, combineReducers } from 'redux'

const countReducer = function (state = 0, action) {
  switch (action.type) {
    case 'add':
      state++
      break
    case 'sub':
      state--
      break
    default:
      return state
  }
  return state
}

const store = createStore(combineReducers({ count: countReducer }))

export default store





2、关于组件的编写

import React, { Component } from 'react'

import { connect } from 'react-redux'

// connect是个高阶组件

// 属性映射到 props
const mapStateToProps = (state) => {
  return { count: state.count }
}

// 方法映射到props
let mapDispatchToProps = {
  add: () => {
    return { type: 'add' }
  },
  minus: () => {
    return { type: 'sub' }
  },
}


// 组件:

class ReactReduxPage extends Component {
  render() {
    const { count, add, minus, asyAdd } = this.props
    return (
      <div>
        <h1>ReactReduxPage</h1>
        <p>{count}</p>
        <button onClick={add}>add</button>
        <button onClick={minus}>minus</button> 
      </div>
    )
  }
}

// 通过装饰器或者 这样导入

export default connect(mapStateToProps, mapDispatchToProps)(ReactReduxPage)





3、除此之外还需要 提供store 让 connet组件可以取到

通过 react-redux 内置 的provider 提供 store

import React from 'react'
import { Provider } from 'react-redux'
import store from './store'
import RReduxpage from './index' // 就是上述的组件

export default function ReactReduxPage() {
  return (
    <div>
      <Provider store={store}>
        <RReduxpage />
      </Provider>
    </div>
  )
}