redux笔记-1

Redux

学习文档

Redux入门教程：https://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

《React学习手册》第八、九章

关系图

实例

import React from 'react';
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';
import { createStore } from 'redux'

// Component
const Counter = ({ value, onIncrement, onDecrement }) => (
  <div>
  <h1>{value}</h1>
  <button onClick={onIncrement}>+</button>
  <button onClick={onDecrement}>-</button>
  </div>
);

//使用常数可以避免字符串写错
const constants = {
  INCREMENT: "INCREMENT",
  DECREMENT: "DECREMENT"
}

//reducer
const reducer = (state = 0, action) => {
  switch(action.type){
    case constants.INCREMENT: 
      return state + 1
    case constants.DECREMENT:
      return state - 1
    default:
      return state
  }
}

//action(返回一个js对象)
const increment = () => { return {type: constants.INCREMENT} }
const decrement = () => { return {type: constants.DECREMENT} }

//store
const store = createStore(reducer)

const render = () => ReactDOM.render(
  <React.StrictMode>
    <Counter
      value={store.getState()}
      onIncrement={() => store.dispatch(increment())}
      onDecrement={() => store.dispatch(decrement())}>
    </Counter>
  </React.StrictMode>,
  document.getElementById('root')
);
render()

reportWebVitals();
//每当state发生变化就执行render函数
store.subscribe(render)

React_Redux

为了方便使用，Redux 的作者封装了一个 React 专用的库 React_Redux

关系图

1.创建Component（由容器组件包裹UI组件）

2.创建reducer

3.通过reducer创建store对象

4.使用Provider包裹根目录，传入store对象

实例

实例过实例1.创建Component（由容器组件包裹UI组件）

//Counter.js
import { Component } from 'react'
import { connect } from 'react-redux'

// 纯UI组件
// value需要从state中计算得到
// onIncreaseClick需要向外发出action
class Counter extends Component {
  render() {
    const { value, onIncreaseClick } = this.props
    return (
      <div>
        <span>{value}</span>
        <button onClick={onIncreaseClick}>Increase</button>
      </div>
    )
  }
}
// 定义value到state的映射
// 第一个参数(固定):是store中的state；第二个参数是容器组件的props对象
function mapStateToProps(state, onsState){
  return {
    value: state.count
  }
}
// 定义onIncreaseClick到dispatch的映射
// 第一个参数(固定):是store中的dispath；第二个参数是容器组件的props对象
function mapDispatchToProps(dispatch, onsState){
  return{
    onIncreaseClick: () => dispatch(increaseAction)
  }
}

//定义action
const increaseAction = {type: 'increase'}

const CounterContainer = connect(mapStateToProps, mapDispatchToProps)(Counter)

export default CounterContainer

2.创建reducer

//reducer.js
export default function counter(state={count: 0}, action){
  const count = state.count
  switch(action.type){
    case "increase":
      return {count: count + 1}
    default:
      return state
  }
}

3.使用Provider

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';

import { createStore } from 'redux'
import { Provider } from 'react-redux';
import reducer from './components/reducer'
import Counter from './components/Counter'
const store = createStore(reducer)

ReactDOM.render(
  // Provider的唯一功能是传入store对象
  <Provider store = {store}>
    <React.StrictMode>
      <Counter />
    </React.StrictMode>
  </Provider>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();