Weby recommends using Weby-Redux to store global variables

use

1. Initialize Store

// app.wpy import { setStore } from 'wepy-redux' import configStore from './store' const store = configStore() SetStore (store) //setStore injects the store into all pages

// Store directory 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) // Generate a Store Object Return Store}

The ApplyMiddleware function enhances and modifies the Store.Dispatch method in this case by using Redex-Promise to resolve asynchrony

2. Page to get the store

import { getStore } from 'wepy-redux' const store = getStore() // dispatch store.dispatch({type: 'xx', payload: Payload data}) / / xx is reducer name is carrying the data store. Dispatch (getAllHoomInfo (store. The getState (). The base)) xx is the action name / / / / get the state const  state = store.getState()

3. Connect components

@connect({data (state) => state. Base. Data // Note that this is the state in which the state is based.})

The file is introduced

Redux file

type

In types is the name of the function that triggers the action. It’s just the name of the store function

Create type.js as a module

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

The function name is exported in index.js

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

reducers

As the application becomes complex, it is necessary to split the reducer function. After the split, each piece is independently responsible for managing a part of the state. At this time, the multiple modules of the reducer function are merged into a final reducer function through combinereEducers.

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

export default combineReducers({
  base,
  counter
})

The module uses HandleActions to handle the reducers by writing multiple related reducers together. HandleActions takes two arguments: the first is multiple reducers and the second is an initial state

GetAllHomeInfo Reducer aspoints the value returned by the asynchronous action to data

//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)

actions

Actions are the processing of data



Export it in index.js

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

CreateAction is used to create the Action

import { GETALLHOMEINFO } from '.. /types/base' import { createAction } from 'redux-actions' import { Http, Apis } from '.. /.. /libs/interface' export const getAllHoomInfo = createAction(GETALLHOMEINFO, (base) => { return new Promise(async resolve => { let data = await Http.get({ url: Apis.ls_url + apis. allHomeInfo, data: {}}) resolve(data)**// return to reduer action.payload**})}

usage

<script> import wepy from 'wepy' import { connect } from 'wepy-redux' import { getAllHoomInfo } from '.. /store/actions/base.js'// import {getStore} from 'epy-redux' const store = getStore() @connect({/store/actions/base.js') data:(state) => state.base.data }) export default class Index extends wepy.page { data = { } computed = { } onLoad() { store.dispatch(getAllHoomInfo(store.getState().base)) } } </script>