Taro中使用redux

1、在pages 同级目录新建3个文件夹。

store、actions、reducers
应用中所有的state都以一个对象树的形式储存在一个单一的store中。唯一的改变是触发action。
store: 创建全局单一的store。
actions：用于描述发生什么事件。
reducers：用于action如何改变state树。

2、如何获取store里面的state？

（1）定义store

import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import rootReducer from '../reducers'

const middlewares = [
thunkMiddleware
]

if (process.env.NODE_ENV === 'development') {
middlewares.push(require('redux-logger').createLogger())
}

export default function configStore () {
const store = createStore(rootReducer, applyMiddleware(...middlewares))
return store
}

（2）在action 定义里pick city的事件。

export const onCityChange = (city) => {
    return {
        type: PICKER_CITY,
        payload: city
      }
}

type：标识某个事件
payload: 事件触发时传的数据
（3）在reducer处理pick city事件

const INITIAL_CITY = {
        id: 1,
        name:'北京'
 }

  export default function onCityPick(state = INITIAL_CITY, action) {
    switch (action.type) {
        case PICKER_CITY:
        console.log('action: ' + action)
          return {
            ...state,
            id: action.payload.id,
            name: action.payload.name
          }
         default:
           return state
      }

  }

INITIAL_CITY:为初始值
这个方法是选择city后更新数据。
（4）将state存储到store

export default combineReducers({
  pickerCity
})

(5) 获取store里面的state
定义props

type PageStateProps = {
    pickerCity: {
          id:number,
          name:string
    }
  }

type PageState = {}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface Index {
  props: IProps;
}

connect 之前定义的state：

@connect(({ pickerCity }) => ({
    pickerCity
}))

取值：

       <View>
            <Text>city id: { this.props.pickerCity.id }</Text>
            <Text>city name: { this.props.pickerCity.name } </Text>
        </View>

2、 如何修改store里面的state?

this.props.onCityChange(city)

 

 

作者：blossom_6694
链接：https://www.jianshu.com/p/b88e4f1533f5
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。