Redux Actions Reducer Map

State management. Redux (if used correctly) keeps a record of every change to your data, allowing you to essentially "travel back in time" to see what caused your bug. In this subreddit we discuss its standards …. Let's turn our filter into a. In order to work with Redux, you need to know a few things. Supports both. The list of concepts or moving parts to be aware of in React/Redux is longer than in Cycle or Elm: Action types (we used enumify to attempt to reduce some boilerplate of repeating action type strings) Action creator functions; Reducers (long switch statements which are syntactically ugly but semantically ok. Redux is a beautiful concept. A lot of the boilerplate has been moved into that, making it customizable but with some very reasonable defaults (such as including Redux Thunk to handle async actions and hooking into Redux Devtools for better debugging). We use cookies for various purposes including analytics. After a while I started noticing my action file has functions doing the same thing but for different inputs: export. Understanding what they are and how to use them is the first step to adding Redux to your application. In the given files, each Reducer managing its own part of the global State. Using it, I removed 5 out of 7 action handlers. One of those things is what a reducer is and what it does. Previously, we got ourselves started with React with Redux fundamentals and touched all the core concepts of Redux including Actions, Reducers and Stores. dispatch(action))することで、ActionをReducerへ通知する; Reduxの例として次のようなコードを見てみます。. Below is an example boilerplate application showing how to build user registration and login functionality using React + Redux on the frontend and ASP. Ngrx/Store implements the Redux pattern using RxJS observables of Angular 2,4,5. state — is held in a container known as the store. Redux Best Practices. many files repeated for each feature (actions, reducers and other sagas). If needed, you can apply the middleware to said store. The reducers for example - small pure functions that apply changes without side effects are nice way to model the mutations in the state. redux-axios-middleware: as the name implies, it is a redux middleware that intercepts all actions that are dispatched with a payload. js Maps 一起使用的 combineReducers 等价物 Ducks: Redux Reducer Bundles 捆绑 reducer、action type 和 action 的. developing this way I don't need to store references to these "constants" and they're only ever relevant when logging. The common and recommended way of using redux is with the combination ofredux + typesafe-actions + redux-observable. It was designed to tackle the challenge of understanding how data changes flow through an application. We tend to split our redux code into two "sections", an action function and a reducer function which usually uses a switch to then return state based upon the supplied action. Remember that actions only describe what happened, but don't describe how the application's state changes. Built with React 16. As a reminder, before we begin to write out our reducers, our reducers will emulate the standard redux reducer pattern below. Reducers specify how the application's state changes in response to actions sent to the store. Has createReducer. Our reducer will consist of 2 small parts: todoList. To get those values into your redux-form-decorated component, you will need to connect() to the Redux state yourself and map from the data reducer to the initialValues prop. When you map an action to another one, you are not preventing the original action from reaching the reducers; that action has already been through them! The real power comes when you need to do something asynchronous. Every time an action was dispatched, the state was updated immediately. In Redux, an action returns a new state via what's called a reducer. Testing a Redux Container, Actions, and Reducers. gajus/redux-immutable 与 Immutable. Creates multiple reducers using handleAction() and combines them into a single reducer that handles multiple actions. Redux Collections One-liners for creating redux reducers and action creators for scrollable, editable lists. Redux actions dispatch, reducer doesn't respond. Actionはあくまで「何が起きたか」を定義するだけです。それを受けて「どうするか」に関する具体的な指示は含みません。 その責務を負うのがReducerです。. Here's how you would use redux-gtm to map the routing actions generated by react-router-redux with your custom GTM event my-app-page-view: Start by creating a mapping between your Redux actions and you analytics events. For the purpose of this application, we define a single reducer that is interested in all actions. We can use our type guard to write a reducer like this (the example reducers in this article perform some basic CRUD actions by manipulating arrays; if you are using NgRx, I'd recommend using @ngrx/entity instead):. Let’s briefly discuss what each of them does. In the third lesson installment of Ngrx, we are going to add Firebase Auth to our basic redux app. handle (which doesn't allow state updates), you'd use self. One of those things is what a reducer is and what it does. For async action creators using Redux Thunk (or other middleware), mock the (minimally) required Redux store for testing. To use Redux with React, you will need the "redux" and "react-redux" npm packages. Accepts a map where the keys are passed as the first parameter to handleAction() (the action type), and the values are passed as the second parameter (either a reducer or reducer map). Reducers##### The ADD_PERSON action has been dispatched, so the person data attached to the action's payload property needs to be added to the array of wanted people. dispatch(action))することで、ActionをReducerへ通知する; Reduxの例として次のようなコードを見てみます。. Basic Concepts. redux-saga; redux-saga. While actions only trigger changes in the app, the reducers specify those changes. Getting started. 读者请注意,ReturnTypes 中,Redux Type 类型被修正为一个字符串字面量类型(key)!以为创造一个可辨识联合做准备。 Redux Action 类型优化. There can only be one of these within an application. Since then, the TypeScript team has been busy enhancing the language, and recent changes in TypeScript have enabled a much more natural, boilerplate-free pattern for strongly typed actions and reducers in TypeScript. You would end up scattering code which shares the same functionality throughout the entire project. For example: cdm will match compDidMount. Below is a road map. One popular redux methodology is known as Ducks, where instead of having all your reducers in one place, actions in another place, etc, you organize them by modules. Redux holds Dan does not endorse ducks because it may confuse beginners into thinking actions map 1:1 to reducers. from 'redux' import thunk from 'redux-thunk' import { createLogger. What we’ll do is model a global stack without the reducer, then run both it and the reducer version simultaneously. js file you can see they are two types of actions available which are ADDNAME and CHANGE_NAME. It's a popular library and today I'd to share our approach of how we write sagas, reducers, actions, selectors and how we test them in some of the projects. This brings us to the end of the blog on React Redux tutorial. In Redux, Reducers are responsible for specifying how the store changes when a specific action is received. Whether you've been writing software for years and want to pick up Flutter quickly, of this is your first go at building an application, this is for you. Ideally, your actions should not be “fat” and should contain as little information as possible, but you should feel free to do what works best for you in your own application. Anyone familiar with Redux already knows what's going on here - we're creating a reducer function which takes state and action as parameters, and depending on the action type it returns a new state (since we don't have any actions defined yet, we just add the default block and return the unmodified state). Async Actions. An action can be thought of (within Redux) as a message or something that happens (hence an action). One of those things is what a reducer is and what it does. In this guide, we will build a different, asynchronous application. Redux reducers are without doubt the most important concept in Redux. Any Redux application follows a specific pattern which makes reading the code and working with the code fairly predictable. Built with React 16. It is conventional to give action names all caps in redux, such as const SOME_ACTION = 'SOME_ACTION' The reducer is just a function that runs a switch statement over possible actions that uses the old state to create a new state. Part 2 — Link. Redux is the most famous library to manage the state at the client side, and it is trendy among React community. This article will be focus on the first step: dispatching an action. dispatch(action) 发送 Action; Redux 根据传入的 action 调用对应的 reducer 方法. ts └── reducers └── index. They choose to organize files by nature (action, component, container, reducer). React Redux is maintained by the Redux team, and kept up-to-date with the latest APIs from Redux and React. Now that you have your reducer, you can create the store. Thankfully though, Redux allows for middleware that sits between an action being dispatched and the action reaching the reducers. In Redux, there is a core concept of Store. While actions only trigger changes in the app, the reducers specify those changes. Im trying to accomplish the following: I want to show data, then filter it / showing filtered results. It builds on a concept of a central state that is kept in a store and gets updated by actions. Each todo has the fields id, text, author and. Short polling is one of the ways to. Redux and window. Redux Store: backbone of redux, includes callback functions to getState and "dispatch" functions to change state. With this configuration, the state movies can be managed by Redux store. > I gave some thoughts about this `receiveProfile` function that's stored in the redux store. In the original Flux, the stores usually mutate their state as a reaction to Actions, in Redux it’s always a functional transformation. Working with redux states using actions. So this might be an unpopular opinion because I know everyone has a hard on for ReDucks, but thats not the right way to do it. Hard and fast rules for Redux apps. This is implemented without touching any of the existing components. If the toasts were a part of a layout container, the props from the parent component could be refreshed whenever a toast is popped. Reducer: Reducers are pure functions with the following type declaration: AppState appReducer(AppState state, action). We are going to handle HTTP async requests inside this. The Redux Store. The explicit specification of nonAtomic: false option. The one with only a map of action => reduce function doesn't allow much. An 'action creator` is a function that creates the data for an action. dispatch is a function of the Redux store. Using it, I removed 5 out of 7 action handlers. With React Redux, your components never access the store directly - connect does it for you. In this case, the action type is toggle todo, so the todos reducer delegates handling of every todo to the todo reducer with a map function to call it for every todo item. If you use string literals, it’s all too easy to misspell one and wonder why your reducer isn’t responding. reducer 声明了state的初始值,以及当前state接受action对象之后处理为new state的逻辑。 createStore接受reducer作为参数,返回产生的store,store其实是一个含有state的闭包,以及提供将action分发给reducer的dispatch方法。. It will allow us to respect a Single Responsibility principle and keep our reducers small and clean. Create a folder to store your redux modules in:. redux 提供了类似后端 Express 的中间件概念,本质的目的是提供第三方插件的模式,自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让. Series contents. It will give our users the ability to authenticate via Google OAuth and logout, while managing the side effects of these actions with @ngrx/effects. For example: cdm will match compDidMount. redux-byId in action. RAW Paste Data. Therefore, roughly following the Redux pattern in this case is less advantageous in terms of code readability. Reducers produce the state of an application. How we can use Redux + Angular to create a reactive architecture that can help us solve some of these common Angular problems. If you use `combineReducers()` to produce the root reducer * function (either directly or indirectly by passing an object as `reducer`), * this must be an object with the same shape as the reducer map keys. Every reducer in your app gets every action that you dispatch. reduce(reducer, ?initialValue). Most application states can be built by combining a handful of these standardized building blocks. Thus similar actions are written for each change in reducers of various states. Below is a road map. There is only one store in any Redux application. You call store. A Reducer should receive the action and the current state, and return a new state object. Domain-Driven Design. Conclusion. The only way to change the state tree is to emit an action, an object describing what happened. This is important as they help you understand the benefits of Redux and how it's to be used. What is a selector? Selectors can compute derived data, allowing Redux to store the minimal possible state. In Redux, a Reducer is a function which takes in the current state and an action, and returns the new state. It simply manages the state of your application or in other words, it is used to manage the data of the application. So what is the right way to do asynchronous operations in Redux? There really is no right answer for everyone. Then on line 12, the action object is dispatched. In the given files, each Reducer managing its own part of the global State. The final thing to add will be a reducer, which interprets the action that occurred and translates it to something that transforms the state (i. Most application states can be built by combining a handful of these standardized building blocks. Creates a higher-order reducer which map actions before passing to a reducer. But, I personally find this to be distracting. In this subreddit we discuss its standards …. Using it, I removed 5 out of 7 action handlers. Game Features. Each CRUD operation is made up of the same set of action creators and reducer to handle each of these actions. Redux processes the action in our reducer and updates our state tree. Our reducer will consist of 2 small parts: todoList. createStore creates a Redux store. Building an Angular 2 "reactive" auto logout timer with the redux pattern 30 May 2016 on angular2, redux, rxjs. In this case, they payload would be a promise that encapsulates the HTTP request. redux-axios-middleware: as the name implies, it is a redux middleware that intercepts all actions that are dispatched with a payload. As an app gets larger, with more actions and more complex reducers, it is all too easy to lose the structure of the root state and to pass inappropriate data through action payloads. redux-saga is a redux middleware, which means this thread can be started, paused and cancelled from the main application with normal redux actions, it has access to the full redux application state and it can dispatch redux actions as well. After talking with Dan Abramov (founder of Redux) he has been preaching the colocation of functions called selectors with your reducers. In the original Flux, the stores usually mutate their state as a reaction to Actions, in Redux it’s always a functional transformation. Common uses of Redux Middleware include: Another feature of the logger middleware: the predicate property lets you filter. Create a 'map' object with mapbox-gl-js inside of a React component. Action creators are exactly that—functions that create actions. Mostly used with React, Redux is a storage facility that helps JavaScript applications to manage state. react的FLUX数据流一直搞不清楚,他不像Angular的双向数据绑定,做一个model获取数据,然后通过controller来管理view上的数据显示就可以了。. They’re the ones who utilize the data passed by the actions in order to update the store. For each action that is dispatched to the reducer (or, to put it simply, every time the reducer function is called), a switch operator creates a new state, depending on the action type, with the changes applied. It was fully synchronous. I like to think of a Reducer in Redux as a "Coffee Maker". Let's populate the Redux store with Action dispatchers and the Reducer state. The main difference between Flux and Redux is how they handle actions; in the case of Flux, we usually have multiple stores and a dispatcher, whereas Redux has a single store, which means a dispatcher is not needed. Gun Mayhem Redux, a free online Action game brought to you by Armor Games. The todo reducer receives the todo as state, and the action. The Redux FAQ has information on splitting logic between action creators and reducers and times when it may be useful to use getState in an action creator. Avoiding Array Mutations with Concat, Slice. Action and Reducer. Either way, Redux is an awesome tool, and I think you should check it out, especially if you’re working with React. Every time an action is applied, an entirely new state is created and stored in the Redux store. Redux is crucial to how our application runs in the real world so this makes our tests very effective. ts file which provide type information on our action creators and. Middleware APIs can intercept requests to execute actions and generate side-effects. Redux reducers are without doubt the most important concept in Redux. Redux Best Practices. I want to show a loading spinner if I'm fetching posts for the first time. We shall define the Redux store in index. The following reducer. Selectors are composable. Reducers are at the heart of Redux, and they give us a clean and predictable way to change the state of our. js, and with bundlers like Webpack and Browserify. If the result of some action creator (createNewUser(), if you want new users to start in map edit mode) needs to include the state. In my previous article, How to load Data in React with Redux-Thunk, Redux-Saga, Suspense & Hooks, I compared different ways of loading data from the API. In a nutshell, ReduxGTM provides a way for mapping your redux actions to custom Gooogle Tag Manager events. Just by looking at how actions, reducers and the store work together, it gives people lots of insights how event-driven systems in other applications are doing there thing. Async Redux: Connecting React to an External API This is Part III of a eight part series on building a CRUD application with React + Redux. 項目追加のActionをつくります。. ReDux should be about fairness, balance and overall providing more enjoyment to the combat, while still being much more difficult. What is a selector? Selectors can compute derived data, allowing Redux to store the minimal possible state. redux-saga is a redux middleware that provides saga functionality using ES6 generators. An action can be thought of (within Redux) as a message or something that happens (hence an action). The common and recommended way of using redux is with the combination ofredux + typesafe-actions + redux-observable. Gun Mayhem is back! Battle the AI or with friends in high octane arena fights with up to 4 players - Revamped cartoon art style gives you more action, less fluff - 21 unique weapons with 2 fire modes. ├── dist └── src ├── actions │ └── index. An action describes some intent (e. val states = actions. Actions in Redux. Hire kickass ReactJS developers. If you're not familiar with the Redux principles, you should read this article first. Epics are the core primitive of redux-observables, a RxJS-based middleware for Redux. js library has data structures like Map (for JS objects), List (for JS arrays), Set, ordered Map, Seq and so on. This way, we can combine our two actions in just one function and reduce a bit our code. Short polling is one of the ways to. Reducer makers help create common reducers like counters, maps, lists (queues, stacks), sets, etc. For the purpose of this application, we define a single reducer that is interested in all actions. The above code follows the ducks bundling pattern (if you’re interested!). This guide describes the basic usage – feel free to dig deeper. One major benefit of using redux-actions to create actions is that it makes it possible to isolate action reducers, which in turn enhances the reuse of action reducers in other parts of the application state with similar requirements. React Redux gives you two ways to let components dispatch actions:. If you are familiar with Redux, this should look fairly straighforward: we are connecting application store to the React component tree in our application. function requestPosts (subreddit) {return {type: REQUEST _ POSTS, subreddit}} The REQUEST_POSTS action type and requestPosts() action creator are poorly named because the action is not telling a reducer to request posts. In this case, they payload would be a promise that encapsulates the HTTP request. function requestPosts (subreddit) {return {type: REQUEST _ POSTS, subreddit}} The REQUEST_POSTS action type and requestPosts() action creator are poorly named because the action is not telling a reducer to request posts. Redux processes the action in our reducer and updates our state tree. js file you can see they are two types of actions available which are ADDNAME and CHANGE_NAME. Implementing Redux Store from Scratch. Besides the store, we still have to work with actions, reducers, and all the other related things that make up the Redux party. In this lesson, we’ll use the plural createActions function and an action map to create multiple action creators with a single utility from redux actions. In Redux, a Reducer is a function which takes in the current state and an action, and returns the new state. To learn more about React, the documentation is a fantastic place to start. However, you can also take manual control of the process. An estimate of approximate compensation is based on your personalized inputs, no identifying data is requested nor retained by this website. In the basics guide, we built a simple todo application. Type part of a snippet, press enter, and the snippet unfolds. redux-saga allows you to intercept redux actions and do funky stuff using effects. if you use redux-actions your reducer can use an action reference directly- not its "type" string. Redux gives a great demonstration of event driven systems for any web developer who hasn't seen one before. - redux_setup. Awesome Redux cheatsheet. You will learn the benefits of Redux a predictable, single-way data flow model as he walks through sample code and best practices like top down approach. Our Reducer. The Redux combineReducers utility function tries to optimize for this. Redux Reducer. Add the Counter Action. type的值出现重复,否则可能会误更新state。 总结. 실제 디스패치 동작은 스토어의 dispatch 메소드를 호출하여 실행한다. The NgRx store is an implementation of the Redux pattern. (阅读本文约需 2 分钟)引言众所周知,在使用 Redux 时最麻烦的一个部分就是 reducer 的编写,由于 Redux 要求状态是 immutable 的,也就是说,发生变化的状态树一定是一个新的引用。. js Maps 一起使用的 combineReducers 等价物 Ducks: Redux Reducer Bundles 捆绑 reducer、action type 和 action 的. This feature is not available right now. To help simplify and cut on the boilerplate, the ngrx organization created a new library called @ngrx/entity that can used with @ngrx/store in Angular 2+ projects. redux-map-action-handlers. However, transforming the branch of state managed by redux-responsive into Immutable data is not supported, because the redux-responsive reducer expects vanilla JS. Using with React Integrating via react-redux. Before we can start creating and implementing a reducer, we first need to define some actions that our reducer can interpret and translate into a state change. let's see an example:. The purpose of redux is to make application data more predictable by creating a one-way data flow. Hire kickass ReactJS developers. They choose to organize files by nature (action, component, container, reducer). Just by looking at how actions, reducers and the store work together, it gives people lots of insights how event-driven systems in other applications are doing there thing. Sagas are like long-running background processes. Son usados para reducir una colección de valores a un único valor. Menu React Redux with Typescript 04 October 2016 on React, Redux, Typescript. Reducer makers help create common reducers like counters, maps, lists (queues, stacks), sets, etc. In my previous article, How to load Data in React with Redux-Thunk, Redux-Saga, Suspense & Hooks, I compared different ways of loading data from the API. js or react-native application. reducers help the store to update itself. Data Flow in a Redux App Step 4: Implement Presentation. redux-axios-middleware: as the name implies, it is a redux middleware that intercepts all actions that are dispatched with a payload. In September 2016, I wrote a post about a pattern for strongly typed Redux reducers in TypeScript. Metal Model 2. This action is dispatched to Reducers and from reducer, the actions are triggered according to corresponding "Type". Includes utilities to simplify common use cases like store setup, creating reducers, immutable update logic, and more. 項目追加のActionをつくります。. That's it! import { createStore } from 'redux' /** * This is a reducer, a pure function with (state, action) => state signature. However, transforming the branch of state managed by redux-responsive into Immutable data is not supported, because the redux-responsive reducer expects vanilla JS. In my previous article, How to load Data in React with Redux-Thunk, Redux-Saga, Suspense & Hooks, I compared different ways of loading data from the API. In my experience action creators and actions in the reducer don't necessarily map 1 to 1, and often don't. so whenever it is clicked an action is dispatched, the reducer function is run will map the. The map provides extra detail on Option 3 in section 8. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. This is a post in the Practical Redux series. ts └── reducers └── index. Simply put, actions are. When you map an action to another one, you are not preventing the original action from reaching the reducers; that action has already been through them! The real power comes when you need to do something asynchronous. Mutations is a better term in my mind as they mutate state, but actions is a good metaphor to as we send these actions into Redux, which maps them to the right reducer, and applies middlewares. Quite often in web applications, data needs to be updated frequently to show relevant information to the user. Behind the project we have 19 active team members spread across 3 agile teams, and 85 contributors to the project in total, and if you ever visit a Neos event or a code sprint, you will. I reduce the lines of code by 10% from 503 to 447, and the number of files by 30% from 20 to 14. onNext(Action. r/javascriptFrameworks: Javascript became a very popular programming language on the past years. Redux reducers are without doubt the most important concept in Redux. In this case, the action type is toggle todo, so the todos reducer delegates handling of every todo to the todo reducer with a map function to call it for every todo item. ##Doing Cool stuff. Map(); // 注入 const store = createStore(reducers, initialState, applyMiddleware(thunk)) export default store. The firebase and firestore reducers that you combined into your rootReducer are no different from any other redux reducer; they accept state and action and return state. As a side-note I would recommend to distinguish between reducerMap for a single reducer (the generator alike interface in handleAction) and a namespaced reducerMap in handleActions. Redux and @ngrx/store reducers for CRUD operations often have a similar shape and end up being mostly boilerplate code. Take a look at the. 理解了React的思想,那么就我的理解而言,Redux实际上是一个管理action,state和props的工具,React让开发者需要关注用户的行为和数据,而Redux为我们提供了一个管理这两者的最佳实践模版。 Redux共由三个主要组件: Action 定义动作的类型,和动作中携带的参数. Camel Cased identifiers allows for abbreviations. js Map or Record. Redux also teaches us to use the one-direction data flow which makes our apps more predictable and stable. This action is dispatched to Reducers and from reducer, the actions are triggered according to corresponding “Type”. ngrx/store builds on the concepts made famous by Redux and supercharges it with the backing of RxJS. I highly recommend giving observables and reactive programming a try because it makes dealing with asynchronous and/or event-based problems like user interactions, animations and timers, websockets, and AJAX calls a breeze. Sounds reasonable. ofType (actionTypes. Now that you have your reducer, you can create the store. This marker array will be used to allow interactivity between the markers and the campground list items. 需要state (等同于总状态) -> store 具体可参考回答,里面已经说得很通俗易懂了,这里主要说下如何实际编写action、reducer、store: 在此之前先说下他们之间是怎么操作. Now Redux is based on Flux, a design pattern that provides developers with an alternative to NVC. Here is a new approach I've been trying for TamaWiki which eliminates a lot of this boilerplate and friction. mount() to initialize the logic and connect it to redux. There are a few reasons you'd want to do this, but let's consider the problem of handling a submit event from a form. This library is based on the Flux pattern. It's largely a matter of preference. Flux Standard Action utlities for Redux. redux-axios-middleware: as the name implies, it is a redux middleware that intercepts all actions that are dispatched with a payload. Redux + Angular. Reducers should be pure functions that return a new state object rather than. io teaches you how to build an Instagram style example app with activity streams and newsfeeds. The official guide on redux middleware covers a few examples on this, I’m going to try to explain it in a more simple way. Note: Read the Redux documentation to learn how it works. This is important as they help you understand the benefits of Redux and how it's to be used. All the data resides at the store. action: Object - see Redux dispatch documentation for complete info; putResolve(action) Just like put but the effect is blocking (if promise is returned from dispatch it will wait for its resolution) and will bubble up errors from downstream. They reduce a set of actions (over time) into a single state. Redux is a predictable state container for JavaScript apps. In Redux there's a Store which holds a State object that represents the state of the whole application. This guide describes the basic usage – feel free to dig deeper. Redux’s default typings describe actions in terms of a minimal inteface with a type (what the action is):. Introduction to Redux (Action, Reducers and Store) Redux is a state managing library used in JavaScript apps. Actions passed into this reducer will only have a type attribute, so they would look something like this: ```js action = { type: "INCREASE" } ``` If the reducer receives a type set to "INCREASE", return a new state where the value of numberOfPresents is increased by one. You would end up scattering code which shares the same functionality throughout the entire project. In Redux, a Reducer is a function which takes in the current state and an action, and returns the new state. This full stack React & Redux tutorial created by getstream. Finally, we need to extract, combine, and project data from store for display in our views. ##Doing Cool stuff. – A word Redux made up to confuse you. Connect, mapStapteToProps and mapDispatchToProps. Short polling is one of the ways to. Creates a higher-order reducer which map actions before passing to a reducer.