Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Simple Stupid Redux Store using Reactive Extensions

License

NotificationsYou must be signed in to change notification settings

Odonno/ReduxSimple

Repository files navigation

./images/logo.png

Redux Simple

CodeFactor

PackageVersions
ReduxSimpleNuGet
ReduxSimple.EntityNuGet
ReduxSimple.UwpNuGet
ReduxSimple.Uwp.RouterStoreNuGet
ReduxSimple.Uwp.DevToolsNuGet

Simple Stupid Redux Store using Reactive Extensions

Redux Simple is a .NET library based onRedux principle. Redux Simple is written with Rx.NET and built with the minimum of code you need to scale your whatever .NET application you want to design.

Example app

There is a sample UWP application to show how ReduxSimple library can be used and the steps required to make a C#/XAML application using the Redux pattern.

You can follow this link:https://www.microsoft.com/store/apps/9PDBXGFZCVMS

Getting started

Like the original Redux library, you will have to initialize a newState when creating aStore + you will createReducer functions each linked to anAction which will possibly update thisState.

In your app, you can:

  • Dispatch newAction to change theState
  • and listen to events/changes using theSubscribe method

You will need to follow the following steps to create your own Redux Store:

  1. CreateState definition
publicclassRootState{publicstringCurrentPage{get;set;}=string.Empty;publicImmutableArray<string>Pages{get;set;}=ImmutableArray<string>.Empty;}

Each State should immutable. That's why we prefer to use immutable types for each property of the State.

  1. CreateAction definitions
publicclassNavigateAction{publicstringPageName{get;set;}}publicclassGoBackAction{}publicclassResetAction{}
  1. CreateReducer functions
publicstaticclassReducers{publicstaticIEnumerable<On<RootState>>CreateReducers(){returnnewList<On<RootState>>{On<NavigateAction,RootState>((state,action)=>state.With(new{Pages=state.Pages.Add(action.PageName)})),On<GoBackAction,RootState>(                state=>{varnewPages=state.Pages.RemoveAt(state.Pages.Length-1);returnstate.With(new{CurrentPage=newPages.LastOrDefault(),Pages=newPages});}),On<ResetAction,RootState>(                state=>state.With(new{CurrentPage=string.Empty,Pages=ImmutableArray<string>.Empty}))};}}
  1. Create a new instance of your Store
sealedpartialclassApp{publicstaticreadonlyReduxStore<RootState>Store;staticApp(){Store=newReduxStore<RootState>(CreateReducers());}}
  1. And be ready to use your store inside your entire application...

Features

Dispatch & Subscribe

You can now dispatch new actions using your globally accessibleStore.

usingstaticMyApp.App;// static reference on top of your fileStore.Dispatch(newNavigateAction{PageName="Page1"});Store.Dispatch(newNavigateAction{PageName="Page2"});Store.Dispatch(newGoBackAction());

And subscribe to either state changes or actions raised.

usingstaticMyApp.App;// static reference on top of your fileStore.ObserveAction<NavigateAction>().Subscribe(_=>{// TODO : Handle navigation});Store.Select(state=>state.CurrentPage).Where(currentPage=>currentPage==nameof(Page1)).UntilDestroyed(this).Subscribe(_=>{// TODO : Handle event when the current page is now "Page1"});
Reducers

Reducers are pure functions used to create a newstate once anaction is triggered.

Reducers on action

You can define a list ofOn functions where at least one action can be triggered.

returnnewList<On<RootState>>{On<NavigateAction,RootState>((state,action)=>state.With(new{Pages=state.Pages.Add(action.PageName)})),On<GoBackAction,RootState>(        state=>{varnewPages=state.Pages.RemoveAt(state.Pages.Length-1);returnstate.With(new{CurrentPage=newPages.LastOrDefault(),Pages=newPages});}),On<ResetAction,RootState>(        state=>state.With(new{CurrentPage=string.Empty,Pages=ImmutableArray<string>.Empty}))};

Sub-reducers aka feature reducers

Sub-reducers also known as feature reducers are nested reducers that are used to update a part of the state. They are mainly used in larger applications to split state and reducer logic in multiple parts.

TheCreateSubReducers function helps you to create sub-reducers. This function has a few requirements:

  • aSelector - to be able to access the value of the current nested state
  • aReducer - to explicitly detail how to update the parent state given a new value for the nested state
  • and the list of reducers usingOn pattern

First you need to create a new state lens for feature/nested states:

publicstaticIEnumerable<On<RootState>>GetReducers(){returnCreateSubReducers(SelectCounterState).On<IncrementAction>(state=>state.With(new{Count=state.Count+1})).On<DecrementAction>(state=>state.With(new{Count=state.Count-1})).ToList();}

Then you can combine nested reducers into your root state:

publicstaticIEnumerable<On<RootState>>CreateReducers(){returnCombineReducers(Counter.Reducers.GetReducers(),TicTacToe.Reducers.GetReducers(),TodoList.Reducers.GetReducers(),Pokedex.Reducers.GetReducers());}

And so inject your reducers into the Store:

publicstaticreadonlyReduxStore<RootState>Store=newReduxStore<RootState>(CreateReducers(),RootState.InitialState);

Remember that following this pattern, you can have an infinite number of layers for your state.

Selectors

Based on what you need, you can observe the entire state or just a part of it.

Note that every selector is amemoized selector by design, which means that a next value will only be subscribed if there is a difference with the previous value.

Full state

Store.Select().Subscribe(state=>{// Listening to the full state (when any property changes)});

Inline function

You can use functions to select a part of the state, like this:

Store.Select(state=>state.CurrentPage).Subscribe(currentPage=>{// Listening to the "CurrentPage" property of the state (when only this property changes)});

Simple selectors

Simple selectors are like functions but the main benefits are that they can be reused in multiple components and they can be reused to create other selectors.

publicstaticISelectorWithoutProps<RootState,string>SelectCurrentPage=CreateSelector((RootStatestate)=>state.CurrentPage);publicstaticISelectorWithoutProps<RootState,ImmutableArray<string>>SelectPages=CreateSelector((RootStatestate)=>state.Pages);Store.Select(SelectCurrentPage).Subscribe(currentPage=>{// Listening to the "CurrentPage" property of the state (when only this property changes)});

Reuse selectors - without props

Note that you can combine multiple selectors to create a new one.

publicstaticISelectorWithoutProps<RootState,bool>SelectHasPreviousPage=CreateSelector(SelectPages,(ImmutableArray<string>pages)=>pages.Count()>1);

Reuse selectors - with props

You can also use variables out of the store to create a new selector.

publicstaticISelectorWithProps<RootState,string,bool>SelectIsPageSelected=CreateSelector(SelectCurrentPage,(stringcurrentPage,stringselectedPage)=>currentPage==selectedPage);

And then use it this way:

Store.Select(SelectIsPageSelected,"mainPage").Subscribe(isMainPageSelected=>{// TODO});

Combine selectors

Sometimes, you need to consume multiple selectors. In some cases, you just want to combine them. This is what you can do withCombineSelectors function. Here is an example:

Store.Select(CombineSelectors(SelectGameEnded,SelectWinner)).Subscribe(x=>{var(gameEnded,winner)=x;// TODO});
Effects - Asynchronous Actions

Side effects are functions that runs outside of the predictable State -> UI cycle. Effects does not interfere with the UI directly and can dispatch a new action in theReduxStore when necessary.

The 3-actions pattern

When you work with asynchronous tasks (side effects), you can follow the following rule:

  • Create 3 actions - a start action, afulfilled action and afailed action
  • Reduce/Handle response onfulfilled action
  • Reduce/Handle error onfailed action

Here is a concrete example.

publicclassGetTodosAction{}publicclassGetTodosFulfilledAction{publicImmutableList<Todo>Todos{get;set;}}publicclassGetTodosFailedAction{publicintStatusCode{get;set;}publicstringReason{get;set;}}
Store.Dispatch(newGetTodosAction());

Create and register effect

You now need to observe this action and execute an HTTP call that will then dispatch the result to the store.

publicstaticEffect<RootState>GetTodos=CreateEffect<RootState>(()=>Store.ObserveAction<GetTodosAction>().Select(_=>_todoApi.GetTodos().Select(todos=>{returnnewGetTodosFulfilledAction{Todos=todos.ToImmutableList()};}).Catch(e=>{returnObservable.Return(newGetTodosFailedAction{StatusCode=e.StatusCode,Reason=e.Reason});})).Switch(),true// indicates if the ouput of the effect should be dispatched to the store);

And remember to always register your effect to the store.

Store.RegisterEffects(GetTodos);
Time travel

By default,ReduxStore only support the default behavior which is a forward-only state.You can however setenableTimeTravel totrue in order to debug your application with some interesting features: handlingUndo andRedo actions.

Enable time travel

sealedpartialclassApp{publicstaticreadonlyReduxStore<RootState>Store;staticApp(){Store=newReduxStore<RootState>(CreateReducers(),true);}}

Go back in time...

When the Store contains stored actions (ie. actions of the past), you can go back in time.

if(Store.CanUndo){Store.Undo();}

It will then fires anUndoneAction event you can subscribe to.

Store.Select().Subscribe(_=>{// TODO : Handle event when the State changed// You can observe the previous state generated or...});Store.ObserveUndoneAction().Subscribe(_=>{// TODO : Handle event when an Undo event is triggered// ...or you can observe actions undone});

...And then rewrite history

Once you got back in time, you have two choices:

  1. Start a new timeline
  2. Stay on the same timeline of events

Start a new timeline

Once you dispatched a new action, the newState is updated and the previous timeline is erased from history: all previous actions are gone.

// Dispatch the next actionsStore.Dispatch(newNavigateAction{PageName="Page1"});Store.Dispatch(newNavigateAction{PageName="Page2"});if(Store.CanUndo){// Go back in time (Page 2 -> Page 1)Store.Undo();}// Dispatch a new action (Page 1 -> Page 3)Store.Dispatch(newNavigateAction{PageName="Page3"});

Stay on the same timeline of events

You can stay o nthe same timeline by dispatching the same set of actions you did previously.

// Dispatch the next actionsStore.Dispatch(newNavigateAction{PageName="Page1"});Store.Dispatch(newNavigateAction{PageName="Page2"});if(Store.CanUndo){// Go back in time (Page 2 -> Page 1)Store.Undo();}if(Store.CanRedo){// Go forward (Page 1 -> Page 2)Store.Redo();}
Reset state

You can also reset the entireStore (reset current state and list of actions) by using the following method.

Store.Reset();

You can then handle the reset event on your application.

Store.ObserveReset().Subscribe(_=>{// TODO : Handle event when the Store is reset// (example: flush navigation history and restart from login page)});
Entity management (in preview)

When dealing with entities, you often repeat the same process to add, update and remove entity from your collection state. With theReduxSimple.Entity package, you can simplify the management of entities using the following pattern:

  1. Start creating anEntityState and anEntityAdapter
publicclassTodoItemEntityState:EntityState<TodoItem,int>{}publicstaticclassEntities{publicstaticEntityAdapter<TodoItem,int>TodoItemAdapter=EntityAdapter<TodoItem,int>.Create(item=>item.Id);}
  1. Use theEntityState in your state
publicclassTodoListState{publicTodoItemEntityStateItems{get;set;}publicTodoFilterFilter{get;set;}}
  1. Then use theEntityAdapter in reducers
On<CompleteTodoItemAction,TodoListState>((state,action)=>{returnstate.With(new{Items=TodoItemAdapter.UpsertOne(new{action.Id,Completed=true},state.Items)});})
  1. And use theEntityAdapter in selectors
privatestaticreadonlyISelectorWithoutProps<RootState,TodoItemEntityState>SelectItemsEntityState=CreateSelector(SelectTodoListState,    state=>state.Items);privatestaticreadonlyEntitySelectors<RootState,TodoItem,int>TodoItemSelectors=TodoItemAdapter.GetSelectors(SelectItemsEntityState);
publicstaticISelectorWithoutProps<RootState,List<TodoItem>>SelectItems=TodoItemSelectors.SelectEntities;
Router (in preview)

You can observe router changes in your own state. You first need to create a State which inherits fromIBaseRouterState.

publicclassRootState:IBaseRouterState{publicRouterStateRouter{get;set;}publicstaticRootStateInitialState=>newRootState{Router=RouterState.InitialState};}

For UWP

In order to get router information, you need to enable the feature like this (inApp.xaml.cs):

protectedoverridevoidOnLaunched(LaunchActivatedEventArgse){// TODO : Initialize rootFrame// Enable router store featureStore.EnableRouterFeature(rootFrame);}
Redux DevTools (in preview)

./images/devtools.PNG

Sometimes, it can be hard to debug your application. So there is a perfect tool called Redux DevTools which help you with that:

  • list all dispatched actions
  • payload of the action and details of the new state after dispatch
  • differences between previous and next state
  • replay mechanism (time travel)

For UWP

In order to make the Redux DevTools work, you need to enable time travel.

publicstaticreadonlyReduxStore<RootState>Store=newReduxStore<RootState>(CreateReducers(),RootState.InitialState,true);

And then display the Redux DevTools view using a separate window.

awaitStore.OpenDevToolsAsync();

Contributors

  • Observe partial state#7
  • ReduxStoreWithHistory#9
  • Reset() method onReduxStore#14
  • XML documentation of C# classes and attributes#16
  • Improvements on sub-reducers, with State lenses#75

Contributors3

  •  
  •  
  •  

Languages


[8]ページ先頭

©2009-2025 Movatter.jp