taro3.x: 搭建redux环境及使用

安装:

npm install redux react-redux redux-thunk redux-logger

创建文件:

1、src/store/index.ts:

import { legacy_createStore as createStore, applyMiddleware } from 'redux'

import thunkMiddleware from 'redux-thunk'

import { createLogger } from 'redux-logger'

import rootReducer from '../reducers'



const middlewares = [

    thunkMiddleware,

    createLogger()

]



export default function configStore() {

    const store = createStore(rootReducer, applyMiddleware(...middlewares));

    return store;

}

2、src/reducers/index.ts

import { combineReducers } from "redux"



import { SET_VALUE } from '../constants'



const initialState={

    directive:''

}

function reducer(state = initialState, action) {

    switch (action.type) {

      case SET_VALUE:

        return {

          ...state,

          [action.field]: action.value

        };

      default:

        return state;

    }

  }

export default combineReducers({

    reducer

})

3、src/constants/common.ts

export const SET_VALUE='SET_VALUE'//更新字段值

4、app.tsx：app.ts改为app.tsx

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

const store = configStore();
 function App({ children }: PropsWithChildren) {
  render() {
    // children 是将要会渲染的页面
    return (
      <Provider store={store} >
        {children}
      </Provider>
    )
  }
}

export default App

5、index.tsx中设置值

...
import { connect } from 'react-redux';

import {setValue} from '@/actions/common'


interface MyProps{
  setValue:(_field,_value)=>{},
}
class Index extends Component<MyProps> {
....
test(){
   this.props.setValue('directive', obj.cmd)
}
...
}



 const mapDispatchToProps ={

    setValue

  }

export default  connect(null, mapDispatchToProps)(Index);

6、另外的index.tsx使用setValue设置过的值

...
import { connect } from 'react-redux';


interface MyProps{

  directive:''

}

class Index extends Component<MyProps> {

...

  componentDidShow(){

    this.setState({

      directive:this.props.directive

    })

　　}

...

}


const mapStateToProps = (state) => ({

  directive: state.reducer.directive

});

export default connect(mapStateToProps)(Index);