redux-shape

查看中文版本

Introduction

Feeling tedious to write redudx action and reducer in seperate files? Not sure what is the state shape created by your reducers? Don't know what action type deals with what reducer? redux-shape make it easy to create a state shape by a shape definition. With the shape defined, your action type and reducer will be determined.

Installation

npm install --save redux-shape

Examples

• redux-shape-example

Concepts

redux-shape has two concepts.

leaf

leaf defines your leaf node of the shape and it's where you write your reducers and state on which the reducers work.

let leaf = {
    state:"",
    reducers:{
    	changeText(state,action){
    	  let text = action.text
    	  return text;
    	},
    	clearText(state,action){
    	  return '';
    	}
    }
}

shape

shape defines your state shape with leaf.

let shape = {
  text:()=>leaf,// a leaf should be returned inside a function.
}

Usage

  import {createStore,combineReducers} from 'redux'
  import reduxShape from 'redux-shape'
  let leaf = {
	state:"",
	reducers:{
		changeText(state,action){
		  let text = action.text
		  return text;
		},
		clearText(state,action){
		  return '';
		}
	}
  }
  let shape = {
	  text:()=>leaf,// a leaf should be returned inside a function.
  }
  let reducer = reduxShape(combineReducers,{shape:shape,delimiter:'.'})
  let store = createStore(reducer)

This code snippet create a redux store using the reducer generated by redux-shape. Note that you should pass combineReducers of redux to redux-shape. If you call store.getState(),you will get an object:

{
	text:''
}

You can change your state by dispatching an action.

store.dispatch({type:'text.changeText',text:'I am a text'})

And now your state will be

{
	text:'I am a text'
}

Action type

After you apply your shape, action types are determined. Action types follow this pattern:

<shapeProperty><delimiter><reducerName>

So for the shape

let shape = {
  text:()=>leaf,// a leaf should be returned inside a function.
}

you can change text by store.dispatch({type:'text.changeText',text:'some text'}), and clear text by store.dispatch({type:'text.clearText'})(changeText and clearText reducers are defined in leaf).

nested state support

Assume that you have defined a nested state (note:nested state is not recommended in a redux app) shape as:

let nestedShape = {
	a:{
		text:()=>leaf
	},
	b:{
		text:()=>leaf
	}
}

You can change state.a.text by store.dispatch({type:'a.text.changeText',text:'some text'}), and change state.b.text by store.dispatch({type:'b.text.changeText',text:'some text'}).

Integrate with react-router-redux

You can integrate redux-shape with react-router-redux easily if you want to use react-router in you app.

react-router-redux need to add custom reducers to store, we can use custom config like below:

  import {createStore,combineReducers} from 'redux'
  import {routerReducer} from 'react-router-redux'
  import reduxShape from 'redux-shape'
  let leaf = {
	state:"",
	reducers:{
		changeText(state,action){
		  let text = action.text
		  return text;
		},
		clearText(state,action){
		  return '';
		}
	}
  }
  let shape = {
	  text:()=>leaf,// a leaf should be returned inside a function.
  }
  let reducer = reduxShape(combineReducers,{
    shape:shape,
    delimiter:'.',
    custom:{
      router:routerReducer
    }
  })
  let store = createStore(reducer)