【taro react】---- 【使用 redux 的配置笔记】

Rattenking

发布于 2022-01-06 20:13:10

1.1K0

发布于 2022-01-06 20:13:10

文章被收录于专栏：RattenkingRattenking

1. 目标

学会 yarn 或 npm 安装中间件
学会配置 redux 的 store
学会 store 的接入和使用

2. 安装中间件

安装redux用到的中间件： redux react-redux redux-thunk redux-logger

$ yarn add redux react-redux redux-thunk redux-logger
# 或者使用 npm
$ npm install --save redux react-redux redux-thunk redux-logger

3. 配置 store

在项目 src 目录下新增一个 store 目录，在目录下增加 index.js 文件用来配置 store。

src/store/index.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducer from '../reducers';

// window.__REDUX_DEVTOOLS_EXTENSION__  可使用Redux DevTools插件
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

// 使用Redux-thunk中间件
const enhancer = composeEnhancers(applyMiddleware(thunk));

// 创建store
const store = createStore(reducer, enhancer);

export default store;

4. 接入 store

在项目入口文件 app.js 中使用 redux 中提供的 Provider 组件将前面写好的 store 接入应用。

src/app.js

import React, { Component } from 'react'
import { Provider } from 'react-redux'
import store from './store'
import './app.css'

class App extends Component {
  // 在 App 类中的 render() 函数没有实际作用
  // 请勿修改此函数
  render () {
    return (
      <Provider store={store}>
        {this.props.children}
      </Provider>
    )
  }
}

export default App

5. 开始使用

constants 目录，用来放置所有的 action type 常量
actions 目录，用来放置所有的 actions
reducers 目录，用来放置所有的 reducers

5.1 以官方示例，开发一个简单的加、减计数器功能

新增 action type

src/constants/counter.js

export const ADD = 'ADD'
export const MINUS = 'MINUS'

5.2 新增 reducer 处理

src/reducers/counter.js

import { ADD, MINUS } from '../constants/counter'

const INITIAL_STATE = {
  num: 0
}

export default function counter (state = INITIAL_STATE, action) {
  switch (action.type) {
    case ADD:
      return {
        ...state,
        num: state.num + 1
      }
    case MINUS:
      return {
        ...state,
        num: state.num - 1
      }
    default:
      return state
  }
}

src/reducers/index.js

import { combineReducers } from 'redux'
import counter from './counter'
import { defaultIndex } from './defaultIndex'
import { commonCart } from './commonCart'
import { goodsDetail } from './goodsDetail'

export default combineReducers({
  counter,
  defaultIndex,
  commonCart,
  goodsDetail 
})

5.3 新增 action 处理

src/actions/counter.js

import {
  ADD,
  MINUS
} from '../constants/counter'

export const add = () => {
  return {
    type: ADD
  }
}
export const minus = () => {
  return {
    type: MINUS
  }
}

// 异步的 action
export function asyncAdd () {
  return dispatch => {
    setTimeout(() => {
      dispatch(add())
    }, 2000)
  }
}

6. 页面或组件使用

在页面（或者组件）中进行使用，我们将通过 redux 提供的 connect 方法将 redux 与我们的页面进行连接。

src/pages/index/index.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { View, Button, Text } from '@tarojs/components'

import { add, minus, asyncAdd } from '../../actions/counter'

import './index.css'


@connect(({ counter }) => ({
  counter
}), (dispatch) => ({
  add () {
    dispatch(add())
  },
  dec () {
    dispatch(minus())
  },
  asyncAdd () {
    dispatch(asyncAdd())
  }
}))
class Index extends Component {
  render () {
    return (
      <View className='index'>
        <Button className='add_btn' onClick={this.props.add}>+</Button>
        <Button className='dec_btn' onClick={this.props.dec}>-</Button>
        <Button className='dec_btn' onClick={this.props.asyncAdd}>async</Button>
        <View><Text>{this.props.counter.num}</Text></View>
        <View><Text>Hello, World</Text></View>
      </View>
    )
  }
}

export default Index