chopped-redux - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

src/index.js

package.json

		{
		"name": "chopped-redux",
		"version": "1.0.3",
		"main": "index.js",
		"version": "1.0.4",
		"description": "A very small Flux implementation based on @gaearon Redux",
		"keywords": [
		"flux",
		"redux"
		],
		"homepage": "https://github.com/acstll/chopped-redux",
		"main": "src/",
		"author": "acstll <arturo@arturu.com>",
		"repository": "acstll/chopped-redux",
		"bugs": {
		"url": "https://github.com/acstll/chopped-redux/issues",
		"email": "arturo@arturu.com"
		},
		"license": "MIT",
		"dependencies": {},
		@@ -8,0 +19,0 @@ "devDependencies": {

142

README.md

		# Chopped Redux

		A very small Flux implementation based on [@gaearon](https://github.com/gaearon) [Redux](https://github.com/gaearon/redux), mainly inspired by this https://github.com/gaearon/redux/pull/166 and this https://github.com/gaearon/redux/issues/113#issuecomment-114049804
		A very small Flux implementation based on [@gaearon](https://github.com/gaearon) [Redux](https://github.com/gaearon/redux), mainly inspired by [this](https://github.com/gaearon/redux/pull/166) and [this](https://github.com/gaearon/redux/issues/113#issuecomment-114049804).

		The idea is to provide a minimal, solid base without the React glue (you have to do that yourself). No hot reloading or time travelling (yet?).
		I recommend you try out [Redux](https://github.com/gaearon/redux) and go through its Github issues as it's a great source of knowledge and inspiration.

		The idea here is to provide a minimal, solid Flux base without the [React](http://facebook.github.io/react/index.html) glue (you have to do that yourself).

		This project follows [SemVer](http://semver.org/). 1.0 doesn't mean it's stable or production-ready.
		@@ -17,2 +19,114 @@

		## API

		- Factory: fluxFactory
		- dispatch
		- getDispatcher
		- getState
		- subscribe
		- wrapActionCreators

		#### Factory: fluxFactory(reducer[, initialState])

		- reducer `Function\|Object` These are your stores
		- initialState `Mixed` Anything you want to hold your state in
		- Returns `Object` A `flux` instance

		The `reducer` function should have this signature:

		```js
		function (state, action) {
		// do something with state depending on the action type,
		// ideally generating a fresh new value
		return state
		}
		```

		What happens internally on every action dispatch is basically this:

		```js
		state = reducer(state, action)
		```

		If you pass an object with reducer functions, a new function will be created which will map the reduced state of every function to a key on the root state object. Like this:

		```js
		// Your stores
		{
		foo: [Function],
		bar: [Function],
		baz: [Function]
		}

		// The root state inside the `flux` instance
		{
		foo: {...} // the reduced state from `stores.foo`
		bar: {...} // the reduced state from `stores.bar`
		baz: {...} // the reduced state from `stores.baz`
		}

		// And you could access those like this
		flux.getState().foo
		```

		#### flux.dispatch(action)

		- action `Object`

		#### flux.getDispatcher()

		- Returns the `dispatch` function bound to the `flux` instance. Literally this: `return this.dispatch.bind(this)`

		#### flux.getState()

		- Returns `Object` Your state

		#### flux.subscribe(listener)

		- listener `Function` A callback that gets fired after every state update
		- Returns `Function` A function to remove the listener

		---

		#### fluxFactory.wrapActionCreators(actionCreators, dispatch)

		- actionsCreators `Object` Your action creators in an object
		- dispatch `Function` The dispatch function to bind to your action creators. You can get this from `flux.getDispatcher()`
		- Returns `Object` Your action creators bound to the dispatcher

		This is a helper function, so instead of writing this:

		```js
		var actionsCreators = {
		exampleAction: function (foo) {
		return {
		type: constants.EXAMPLE_TYPE,
		value: foo
		}
		}
		}

		flux.dispatch(actionCreators.exampleAction('bar'))
		```

		you can do this:

		```js
		var actionsCreators = {
		exampleAction: function (foo, dispatch) {
		return dispatch({
		type: constants.EXAMPLE_TYPE,
		value: foo
		})
		}
		}

		var wrap = fluxFactory.wrapActionCreators
		var actions = wrap(actionCreators, flux.getDispatcher())

		actions.exampleAction('bar') // dispatches!
		```

		and have the action automatically dispatched.

		## Example
		@@ -22,3 +136,3 @@

		Stores are pure functions, just like in Redux. They don't hold the state and don't emit events either. They just receive the state, update it, and return the new state.
		Stores are pure functions, just like in Redux. They don't hold the state and don't emit events either (that's why in Redux they're called Reducers; I prefer to keep calling them Stores). They just receive the state, update it, and return the new state.

		@@ -50,4 +164,6 @@ ```js

		Actions should have the following signature, always receiving a `dispatch` function as last argument. (There's a utility wrapper function to make this easy)
		Action creators are functions that yield an action object (or payload in vanilla Flux terminology). They can simply return that object, or if you need to do async operations, you can pass in a dispatch callback and fire it passing in the action object. If the latter is the case, always pass the `dispatch` function as the last argument, so you can use the utility wrapper function (`wrapActionCreators`).

		Further reading: [The Evolution of Flux Frameworks](https://medium.com/@dan_abramov/the-evolution-of-flux-frameworks-6c16ad26bb31).

		```js
		@@ -87,18 +203,17 @@

		// Define stores and action creators
		var stores = {
		counter: require('./stores/counter'),
		beep: function (state, action) {
		return action.type === SOME_ACTION_TYPE_CONSTANT
		? 'boop'
		: state \|\| undefined
		}
		counter: require('./stores/counter')
		}

		var actionCreators = {
		counter: require('./actions/counter'),
		counter: require('./actions/counter')
		}

		// Create a flux instance passing in the stores and initial state
		var flux = fluxFactory(stores, { counter: 1 })

		// Bind action creators to the dispatcher
		var actions = wrap(actionCreators, flux.getDispatcher())

		// Subscribe a callback to state updates
		var unsubscribe = flux.subscribe(function () {
		@@ -108,2 +223,5 @@ console.log(flux.getState())

		// Trigger an action: this dispatches the action,
		// the state tree in the flux instance goes through the store function(s),
		// and listener callbacks fire
		actions.increment()
		@@ -110,0 +228,0 @@ // => { counter: 2 }

src/map-values.js


		// Liftet from https://github.com/gaearon/redux

		module.exports = function mapValues (obj, fn) {
		@@ -5,0 +3,0 @@ return Object.keys(obj).reduce(function (result, key) {

index.js

src/flux.js

chopped-redux - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics