{"_id":"redax","_rev":"3-08db7acf6dd5f8b5d76a6f96545e3509","name":"redax","description":"A simple flux architecture that combines actions & reducers and maps your store's state directly to your components","dist-tags":{"latest":"0.0.0"},"versions":{"0.0.0":{"name":"redax","version":"0.0.0","description":"A simple flux architecture that combines actions & reducers and maps your store's state directly to your components","main":"lib/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build-js":"mkdir -p examples/build/js && browserify -d -t babelify examples/src/js/index.js -o examples/build/js/index.js","watch-js":"ulimit -n 512 && watchify -d -t babelify examples/src/js/index.js -o examples/build/js/index.js -v","watch":"npm run watch-js","build":"npm run build-js","start":"http-server examples -c-1 -o"},"repository":{"type":"git","url":"git+https://github.com/JakeSidSmith/redax.git"},"keywords":["react","flux","reducer","action","data","flow","store"],"author":{"name":"Jake 'Sid' Smith"},"license":"MIT","bugs":{"url":"https://github.com/JakeSidSmith/redax/issues"},"homepage":"https://github.com/JakeSidSmith/redax#readme","dependencies":{"immutable":"=3.7.6","react":">=0.14.0"},"devDependencies":{"babel-preset-es2015":"=6.6.0","babel-preset-react":"=6.5.0","babelify":"=7.2.0","browserify":"=13.0.0","http-server":"=0.9.0","react-dom":"=0.14.8","watchify":"=3.7.0"},"gitHead":"a78c592222ce6011428c9bc4ac3c701e21a93ce9","_id":"redax@0.0.0","_shasum":"946893e1f8a4f96bcec447aec111059cc3ef09fb","_from":".","_npmVersion":"3.7.3","_nodeVersion":"5.9.0","_npmUser":{"name":"jakesidsmith","email":"jake@dabapps.com"},"dist":{"shasum":"946893e1f8a4f96bcec447aec111059cc3ef09fb","tarball":"https://registry.npmjs.org/redax/-/redax-0.0.0.tgz","integrity":"sha512-Drty5gj3V6UXKsdFSBNFutQrYQpFmg6Iq6wY33dfuOH9d0F7lV4mv/EGgcBmdkJTH2KLG6m+xoIFr9PJnn8DLw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLSCQlA0sztrq5M3f8AJYnGNpJOb8FKsO3t95uD0CrzwIgAYyxwGxF0+U7T51QT1Q8Dopg2NB3fNshov4Urd7uOtI="}]},"maintainers":[{"name":"jakesidsmith","email":"jake@dabapps.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/redax-0.0.0.tgz_1459760171804_0.41636570962145925"}}},"readme":"# Redax\n\nRedax combines your actions & reducers to reduce the amount of files you'll need open, and amount of code you have to write - no more searching through dozens of files to find the reducer that matches your action, and no more constants for action types.\n\nRedax also lets you access the entire state tree from every action so that you can easily store it in local storage, reset the entire state, or update multiple collections of data easily.\n\nThe redax Store has a very useful `map` function to connect your store directly to a component's props. No more need to manually add and remove listeners for state changes, or wrap your application with a provider. Because redax uses immutablejs it internally difs your previous and next state, so that components will only update if a change has been made.\n\nBy default redax will allow you to chain actions and handle asynchronous requests as calls made to actions from inside an action are deferred until the action has been resolved.\n\n## Usage\n\n### Create a store\n\nA store's default state is an immutablejs `Map`. We call our `setCount` action after creation to set the initial count value, but this could set the entire initial state of your application, or be used to reset the state if you need to do so (which you should do with `state.clear()`).\n\n```javascript\n// store.js\n\nimport { Store } from 'redax';\nimport * as actions from './actions';\n\nconst store = new Store(\n  // Object containing our actions\n  actions\n);\n\nstore.actions.setCount();\n\nexport default store;\n```\n\n### Actions\n\nEvery action is also a reducer, so they must all return the state. The state in each action is the entire state of the store. It's recommended that you use `setIn` and `deleteIn` for grouping related data (example a little further down).\n\n```javascript\n// actions.js\n\n// Used to set the initial count value\nexport function setCount (state) {\n  return state.set('count', 0);\n}\n```\n\n### Combine multiple action files\n\nUse `Object.assign` or similar, e.g. `_.extend`, to combine multiple sets of actions.\n\n```javascript\n// store.js\n\nimport * as login from './login';\nimport * as todo from './todo';\n\nconst store = new Store(\n  Object.assign(\n    {},\n    login,\n    todo\n  )\n);\n```\n\n### Chaining actions\n\nNotice that the `incrementThenDecrementTwice` action calls the `decrement` action twice. The `decrement` calls will be deferred until `incrementThenDecrementTwice` is resolved, this means that you can easily chain actions, and handle asynchronous requests.\n\n```javascript\n// actions.js\n\nexport function decrement (state) {\n  return state.set('count', state.get('count') - 1);\n}\n\nexport function incrementThenDecrementTwice (state) {\n  this.actions.decrement();\n  this.actions.decrement();\n  return state.set('count', state.get('count') + 1);\n}\n```\n\n### Asynchronous example\n\nHere we make an asynchronous request and then call either our success or failure action. You can access the store's actions via `this.actions` if you do not have access to the store itself. Notice how we group our state into `login` and `auth` because we have access to the entire state.\n\n```javascript\n// login.js\n\nexport function loginSuccess(state, response) {\n  const login = state.get('login', Map())\n    .delete('loading')\n    .delete('error');\n\n  return state.set('login', login)\n    .setIn(['auth', 'token'], response);\n}\n\nexport function loginFailure(state, error) {\n  const login = state.get('login', Map())\n    .delete('loading')\n    .set('error', error);\n\n  return state.set('login', login)\n    .deleteIn(['auth', 'token']);\n}\n\nexport function login(state, username, password) {\n  const login = state.get('login', Map())\n    .set('loading', true)\n    .delete('error');\n\n  request('/login/')\n    .data({username, password})\n    .send()\n    .then(this.actions.loginSuccess, this.actions.loginFailure);\n\n  return state.set('login', login)\n    .deleteIn(['auth', 'token']);\n}\n```\n\n### Connecting your store state to your components\n\nConnect your store's state to your components easily with `store.map`. Notice that we do not need to connect our actions to our component as these are automatically dispatched on call.\n\n```javascript\n// component.js\n\nimport store from './store';\n// Destructuring our actions from the store\nconst { actions: { incrementThenDecrementTwice } } = store;\n\nclass Component extends React.Component {\n  render() {\n    const { count } = this.props;\n\n    return (\n      <button onClick={incrementThenDecrementTwice}>\n        Count: {count}\n      </button>\n    );\n  }\n}\n\nfunction stateToProps(state) {\n  return {\n    count: state.get('count')\n  };\n}\n\nexport default store.map(stateToProps).to(Component);\n```\n","maintainers":[{"name":"jakesidsmith","email":"jake@dabapps.com"}],"time":{"modified":"2022-06-26T09:39:12.700Z","created":"2016-04-04T08:56:13.933Z","0.0.0":"2016-04-04T08:56:13.933Z"},"homepage":"https://github.com/JakeSidSmith/redax#readme","keywords":["react","flux","reducer","action","data","flow","store"],"repository":{"type":"git","url":"git+https://github.com/JakeSidSmith/redax.git"},"author":{"name":"Jake 'Sid' Smith"},"bugs":{"url":"https://github.com/JakeSidSmith/redax/issues"},"license":"MIT","readmeFilename":"README.md"}