Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use Redux in Mini Program, the article is very detailed, has a certain reference value, interested friends must read it!

Use Redux for state management in Mini Program. Redux is a front-end state management container. For building large applications, it is very convenient to share data and state management. Students who have studied React should be familiar with it. If you don't know it, you might as well take a look at it.

The wepy framework itself supports Redux. When we build the project, we will just choose y to install Redux. We will automatically install dependencies. It is possible to see the official demo after running the project, but there is nothing about this piece in the official document. After trying it for a while, I have found out how to use it a little bit. I will share it with you immediately.

Concrete realization

Running our project, we found that the official website has given us some ways to use Redux. In fact, it is mainly under the store folder. Now let's take a look.

Step1

Entry file index.js, which is mainly used to initialize Redux, where promiseMiddleware is a middleware to facilitate asynchronous processing by action. ~ reducers is a pure function that accepts Action and the current State as parameters and returns a new State ~

Import {createStore, applyMiddleware} from 'redux'import promiseMiddleware from' redux-promise'import reducer from'. / reducers'const Store = createStore (reducer, applyMiddleware (promiseMiddleware)) export default configStore = > Storestep2

The remaining three folders are types reducers and actions, where types is used to define the name of the action we want to trigger, that is, the name of action. Here, I define two types, counter and list, which are as follows:

Counter.js

Export const INCREMENT = 'INCREMENT'export const DECREMENT =' DECREMENT'export const ASYNC_INCREMENT = 'ASYNC_INCREMENT'

List.js

Export const ADD = 'ADD'export const REMOVE =' REMOVE'

Finally, they are exposed through the entry file index.js of the types folder.

Export * from'. / counter'export * from'. / list'step3

The reducers file stores our pure function to change our state. It also has an entry file, index.js, which is defined as follows:

Import {combineReducers} from 'redux' import counter from'. / counter' import list from'. / list' export default combineReducers ({counter, list})

First of all, the introduction of counter and list respectively, through the combineReducers function defined by redux, all the reducers are merged into a whole, which is convenient for us to manage later!

So what is the reducer of counter and list respectively? Let's look directly at the code:

Counter.js

Import {handleActions} from 'redux-actions' import {INCREMENT, DECREMENT, ASYNC_INCREMENT} from'. / types/counter' const defaultState = {num: 0, asyncNum: 0} export default handleActions ({[INCREMENT] (state) {return {... state) Num: state.num + 1}}, [DECREMENT] (state) {return {... state, num: state.num-1}} [ASYNC_INCREMENT] (state, action) {return {... state, asyncNum: state.asyncNum + action.payload}, defaultState)

Let's introduce the reducer in counter.js. First, we introduce the handleActions method to create the actions. It also writes multiple related reducer together, and it is also easy to use dispatch to change the state in the state. It mainly receives two parameters, the first parameter is a large object, which stores multiple reducer, and the second parameter is the state value of the state during initialization, so We defined defaultState from the beginning.

Next, let's take a look at the reducer inside, and define three reducer, INCREMENT, DECREMENT and ASYNC_INCREMENT, respectively. The first two are relatively simple, adding and subtracting the num value in state, and the last one is asynchronously operating on the value of asyncNum through the value of action.payload. How to do that? we'll see later.

The reducer defined in list.js is similar to the above, so I won't introduce them one by one, just paste the code.

List.js

Import {handleActions} from 'redux-actions' import {ADD, REMOVE} from'. / types/list' const defaultState = [{title: 'eat', text:'I'm going to have hot pot today'}, {title: 'work' Text: 'today I'm going to learn Redux'}] export default handleActions ({[ADD] (state, action) {state.push (action.payload) return [. State]}, [REMOVE] (state, action) {state.splice (action.payload) 1) Return [... state]}}, defaultState) step4

We have finally come to this point. Here, you are not far from what you expected. There is only one actions file left. Without exception, the entry file index.js is as follows:

Index.js

Export * from'. / counter'

Very simple, only need to export the required action ~

In this, I only define the action of counter, which is prepared for asynchronous data asyncNum just now.

Counter.js

Import {ASYNC_INCREMENT} from'. / types/counter' import {createAction} from 'redux-actions' export const asyncInc = createAction (ASYNC_INCREMENT, () = > {return new Promise (resolve= > {setTimeout (() = > {resolve (1)}, 1000)})

This is different from that in reducer. A series of data processing can be performed here. We create an action through createAction. This method mainly has two parameters. The first parameter, type, represents the type of action, and the second parameter, payloadCreator, is a function, which processes and returns the required payload. If there is a vacancy, the default method is used. Here we return a 1 after a delay of 1 second.

Ok, so far, you have basically completed a container for redux ~

Next, it's time to show how it works.

Step5

Let's create an index.wpy file. Here I will post the code directly, and then analyze it slowly.

The code is as follows:

Synchronous {{num}} Asynchronous {{asyncNum}} plus one minus one Asynchronous plus one add {{item.title}} {{item.text}} Delete import wepy from 'wepy' import {connect} from' wepy-redux' import {INCREMENT DECREMENT} from'. / store/types/counter' import {asyncInc} from'.. / store/actions' @ connect ({num (state) {return state.counter.num) }, asyncNum (state) {return state.counter.asyncNum }}, {increment: INCREMENT, decrement: DECREMENT AsyncIncrement: asyncInc}) export default class Index extends wepy.page {components = {} computed = {todoList () {return wepy.$store.getState () .list }} methods = {delete (index) {wepy.$store.dispatch ({type: 'REMOVE', payload: index})}, addList () {wepy.$store.dispatch ({type:' ADD') Payload: {title: 'learning' Text: 'study hard'})} onLoad () {console.log (wepy.$store.getState ())}} text {display: block Text-align: center; margin: 10px auto;} button {width: 90%; display: block; margin: 10px auto;} .item {display: flex; align-items: center; text-align: center; padding: 0 15px .title {font-size: 14px; line-height: 20px; margin: 10px auto;} .content {font-size: 15px; flex: 1;} .delete {width: 70px Height: 40px; line-height: 40px;}}

Click a little to see, found that shit, very good, is not?

Ok~, let's see how the above code is done.

We won't discuss the style and structure here, but mainly look at the js section, where import {INCREMENT, DECREMENT} from'. / store/types/counter' and import {asyncInc} from'.. / store/actions' represent the action needed to export from counter and actions, respectively.

Let's focus on connect introduced from wepy-redux. This connect is critical. It is a bridge between components and states. The main usage is @ connect (states, actions) ~

States: access the values on state, which can be an array or an object. If it is an object, it contains a pair of Kmurv pairs, V can be a function or a string, and if it is a string, it acquires state [V] by default, otherwise it uses the return value; and for an array (the items in the array can only be strings), it is considered to be the same Kmurv object structure. The states will eventually be attached to the value of the computed attribute of the component.

The above is all the contents of the article "how to use Redux in Mini Program". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.