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

This article mainly shows you "how to achieve Dispatch in Fish Redux", the content is simple and clear, hoping to help you solve your doubts, let the editor lead you to study and learn "how to achieve Dispatch in Fish Redux" this article.

Preface

When we use fish-redux to build an application, the interface code (view) is completely decoupled from the event handling logic (reducer,effect). When the interface needs to handle events, the action is distributed to the corresponding event handling logic for processing. The process of this distribution is the dispatch to be discussed below. Through the content of this article, you can gain a deeper understanding of how an action is distributed step by step.

Starting with example

In order to better understand the dispatch process of action, let's take the check event of a todo entry in todolistpage as an example to see the transmission process of the event after clicking. Through the breakpoint debug, we can easily find out what happens when we click. The specific process is as follows:

If the user clicks the check box, the onTap of GestureDetector will be called back.

The doneAction is distributed through the dispatch function passed in buildView, and it is found that the doneAction cannot be processed in the effect of todo_component, so it is handed over to the dispatch of pageStore to continue the distribution.

The dispatch of pageStore will hand over the action to reducer for processing, so the corresponding _ markDone of doneAction will be executed, clone the state, modify the status of the state after clone, and then return the new state

Then the dispatch of pageStore notifies all listeners, in which the _ viewUpdater responsible for interface redrawing discovers that the state has changed and notifies the interface to redraw and update.

Analysis of Dispatch implementation

The definition of Dispatch in fish-redux is as follows

Typedef Dispatch = void Function (Action action)

It is essentially an action handler that accepts an action and then distributes the action.

Below our door through the source code to conduct a detailed analysis.

0 initialization-> ComponentWidget- > ComponentState- > _ mainCtx- > _ dispatch, while the initialization of _ mainCtx is created by componet's createContext method. Following the method, we see the initialization of dispatch.

/ / redux_component/context.dart DefaultContext initialization method

DefaultContext ({

@ required this.factors

@ required this.store

@ required BuildContext buildContext

@ required this.getState

}): assert (factors! = null)

Assert (store! = null)

Assert (buildContext! = null)

Assert (getState! = null)

_ buildContext = buildContext {

Final OnAction onAction = factors.createHandlerOnAction (this)

/ create Dispatch

_ dispatch = factors.createDispatch (onAction, this, store.dispatch)

/ Register inter-component broadcast

_ onBroadcast =

Factors.createHandlerOnBroadcast (onAction, this, store.dispatch)

RegisterOnDisposed (store.registerReceiver (_ onBroadcast))

}

The dispatch in context is created through factors. Factors is actually the onAction function passed in the current component,factors when creating dispatch, as well as the dispatch of context itself and store. OnAction mainly deals with Effect. You can also see here that at the end of initializing context, register your own onAction wrapper with the store broadcast so that you can receive action broadcasts from others.

Component inherits from Logic

/ / redux_component/logic.dart

@ override

Dispatch createDispatch (

OnAction onAction, Context ctx, Dispatch parentDispatch) {

Dispatch dispatch = (Action action) {

Throw Exception (

'Dispatching while appending your effect & onError to dispatch is not allowed.')

}

/ attach to store.dispatch

Dispatch = _ applyOnAction (onAction, ctx) (

Dispatch: (Action action) = > dispatch (action)

GetState: () = > ctx.state

) (parentDispatch)

Return dispatch

}

Static Middleware _ applyOnAction (OnAction onAction, Context ctx) {

Return ({Dispatch dispatch, Get getState}) {

Return (Dispatch next) {

Return (Action action) {

Final Object result = onAction?.call (action)

If (result! = null & & result! = false) {

Return

}

/ / skip-lifecycle-actions

If (action.type is Lifecycle) {

Return

}

If (! shouldBeInterruptedBeforeReducer (action)) {

Ctx.pageBroadcast (action)

}

Next (action)

}

}

}

}

}

The logic distributed above can probably be represented by the figure above.

Send the action to the corresponding effect of component for processing through onAction

When effect cannot process this action, and the action is not lifecycle-actions and does not require interruption, it is broadcast to all remaining effects of the current Page

Finally, continue to distribute action to store's dispatch (parentDispatch actually passes in store.dispatch)

0

/ / redux/create_store.dart

Final Dispatch dispatch = (Action action) {

_ throwIfNot (action! = null, 'Expected the action to be non-null value.')

_ throwIfNot (

Action.type! = null, 'Expected the action.type to be non-null value.')

_ throwIfNot (! isDispatching, 'Reducers may not dispatch actions.')

Try {

IsDispatching = true

State = reducer (state, action)

} finally {

IsDispatching = false

}

Final List _ notifyListeners = listeners.toList (

Growable: false

);

For (_ VoidCallback listener in _ notifyListeners) {

Listener ()

}

NotifyController.add (state)

}

The dispatch process of store is relatively simple, which is mainly to call reducer and notify the listener after the processing is completed.

0

/ / redux_component/component.dart

Widget buildPage (P param) {

Return wrapper (_ PageWidget (

Component: this

StoreBuilder: () = > createPageStore

InitState (param)

Reducer

ApplyMiddleware (buildMiddleware (middleware))

),

))

}

/ / redux_component/page_store.dart

PageStore createPageStore (T preloadedState, Reducer reducer)

[StoreEnhancer enhancer]) = >

_ PageStore (createStore (preloadedState, reducer, enhancer))

/ / redux/create_store.dart

Store createStore (T preloadedState, Reducer reducer)

[StoreEnhancer enhancer]) = >

Enhancer! = null

? Enhancer (_ createStore) (preloadedState, reducer)

: _ createStore (preloadedState, reducer)

So you can see here that when enhancer is passed in, the work of createStore is proxied by enhancer and returns a store that has been processed by enhancer. When PageStore is created, the enhancer of the middleware is passed in.

/ / redux/apply_middleware.dart

StoreEnhancer applyMiddleware (List middleware) {

Return middleware = = null | | middleware.isEmpty

? Null

: (StoreCreator creator) = > (T initState, Reducer reducer) {

Assert (middleware! = null & & middleware.isNotEmpty)

Final Store store = creator (initState, reducer)

Final Dispatch initialValue = store.dispatch

Store.dispatch = (Action action) {

Throw Exception (

'Dispatching while constructing your middleware is not allowed.'

'Other middleware would not be applied to this dispatch.')

}

Store.dispatch = middleware

.map ((Middleware middleware) = > middleware (

Dispatch: (Action action) = > store.dispatch (action)

GetState: store.getState

))

.fold (

InitialValue

(Dispatch previousValue

Dispatch Function (Dispatch) element) = >

Element (previousValue)

);

Return store

}

}

The logic here is to string all middleware handlers to store's dispatch, so that all middleware handlers will be called when store dispatch. The following is the execution order of each processing function

First of all, dispatch D1 in component will be executed and then passed to store's dispatch, while store's dispatch has been enhanced by middleware, so the middleware processing function will be executed, and eventually the original dispatch function D2 of store will be executed.

The above is all the content of the article "how to achieve Dispatch in Fish Redux". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more 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.