wepy中使用redux-saga作为异步中间件

本人demo:https://github.com/YufJi/WepyWithSaga

依赖安装 redux redux-saga wepy-redux

store/index.js

        import { createStore, applyMiddleware } from 'redux'

import createSagaMiddleware from 'redux-saga/dist/redux-saga'

import rootReducer from './reducers'

import rootSaga from './saga'

const sagaMiddleware = createSagaMiddleware()

const initState = {

  global: {

    list: [],

    loading: true,

  },

}

const store = createStore(rootReducer, initState, applyMiddleware(sagaMiddleware))

sagaMiddleware.run(rootSaga)

export default store

store/saga.js

        import { effects } from 'redux-saga/dist/redux-saga'
        import { getData } from './api'
        const { call, put, takeLatest } = effects

function* fetchData({ payload }) {

  yield put({

    type: 'TOGGLELOADING',

    payload: true,

  })

  try {

    const data = yield call(getData, {})

    yield put({

      type: 'SETDATA',

      payload: data,

    })

    yield put({

      type: 'TOGGLELOADING',

      payload: false,

    })

  } catch (e) {

    console.log(e)

  }

}

export default function* rootSaga() {

  yield takeLatest('GETDATA', fetchData)

}

store/reducer/index.js

    import { combineReducers } from 'redux'


function global(state = {}, action) {
  switch (action.type) {
    case 'SETDATA':
      return { ...state, list: action.payload }
    case 'TOGGLELOADING':
      return { ...state, loading: action.payload }
    default:
      return state
  }
}


const rootReducer = combineReducers({
  global
})


export default rootReducer



页面调用action: store.dispath({})

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值