神刀安全网

Enabling clean, immutable Redux reducers

Redux Immutable Reducer

Immutable state enabled reducers for Redux.ImmutableJS is a peer dependency of this project.

npm install --save redux-immutable-reducer 

How to get it?

// ES6 Modules import immutableReducer from 'redux-immutable-reducer' // CommonJS var immutableReducer = require('redux-immutable-reducer').default // UMD var immutableReducer = window.ReduxImmutableReducer.default

What is it?

ReduxImmutableReducer solves the issue of using ImmutableJS with Redux. There are a ton of ugly .toJS() and .fromJS() calls when using the two together and this allows you to avoid all of it. It also helps keep devtools state clean and readable.

All you have to do to enable it is to wrap your reducer. This will make the state object within your reducer an Immutable object, making it easy to manipulate and keep the data immutable, but then will transform the output state into a regular Javascript datatype for the rest of your application. Here are a few examples.

With Arrays

import immutableReducer from 'redux-immutable-reducer';  const list = [1, 2, 3, 4]; function listReducer(state = list, action) {     switch (action.type) {         case 'UPDATE':             return state.push(action.payload);         default:             return state;     } } export default immutableReducer(todoReducer);

With Objects

import immutableReducer from 'redux-immutable-reducer';  const deepState = { foo: { bar: { baz: 'qux' }}}; export function deepReducer(state = deepState, action) {     switch (action.type) {         case 'UPDATE':             return state.mergeDeep(action.payload);         default:             return state;     } } export default immutableReducer(deepReducer);

Installation

npm install --save redux-immutable-reducer 

License

MIT

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Enabling clean, immutable Redux reducers

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址