작은 프로그램에서 wepy-redux 사용 및 전역 변수 저장

Wepy는 전역 변수를 저장하기 위해 wepy-redux를 사용할 것을 권장합니다

1을 사용하세요. 스토어를 초기화하세요

// app.wpy
import { setStore } from 'wepy-redux'
import configStore from './store'

const store = configStore()
setStore(store) //setStore是将store注入到所有页面中

// store文件夹下的index.js

import { createStore, applyMiddleware } from 'redux'
import promiseMiddleware from 'redux-promise'
import rootReducer from './reducers'

export default function configStore () {
  const store = createStore(rootReducer, applyMiddleware(promiseMiddleware)) //生成一个 store 对象
  return store
}

applyMiddleware의 기능은 store.dispatch 메소드를 강화하고 변형하는 것입니다
redux를 사용하는 솔루션은 다음과 같습니다. Promise Asynchronous

2. 스토어 가져오기

---

import { getStore } from 'wepy-redux'
 
const store = getStore()

// dispatch
store.dispatch({type: 'xx', payload: data}) //xx是reducer名字 payload就是携带的数据
store.dispatch(getAllHoomInfo(store.getState().base)) //xx是action名字

//获取state
const state = store.getState()

3. 컴포넌트 연결

@connect({
    data:(state) => state.base.data //注意这里是base下的state 所有要加上base.
})

파일 소개

redux 파일

type

유형 트리거 작업 함수 이름은

모듈에 따라 type.js를 생성합니다. 감속기 함수는 분할되어야 하며, 분할 후 각 블록은 독립적으로 상태의 일부를 관리합니다.

combineReducers

를 통해 최종 리듀서 함수로 병합됩니다.

//base.js
export const GETALLHOMEINFO = 'GETALLHOMEINFO'

모듈은

handleActions를 사용합니다.

리듀서를 처리하려면 여러 관련 리듀서를 함께 작성하세요. handleActions

에는 두 개의 매개변수가 있습니다. 첫 번째는 여러 리듀서이고, 두 번째는 초기 상태

GETALLHOMEINFO 감속기는 비동기 작업에서 반환된 값을 data

export * from './counter'
export * from './base'

actions

actions에 할당합니다.

import { combineReducers } from 'redux'
import base from './base'
import counter from './counter'

export default combineReducers({
  base,
  counter
})

usage

//base.js
import { handleActions } from 'redux-actions'
import { GETALLHOMEINFO } from '../types/base'

const initialState = {
  data: {}
}
export default handleActions({
  [GETALLHOMEINFO] (state, action) {
    return {
      ...state,
      data: action.payload
    }
  }
}, initialState)

추천 튜토리얼: " WeChat Mini 프로그램

》

위 내용은 작은 프로그램에서 wepy-redux 사용 및 전역 변수 저장의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!