ZIPredux-0.5.1.zip 16.21KB

a3737337

资源文件列表:

redux-0.5.1.zip 大约有46个文件
  1. redux-0.5.1/
  2. redux-0.5.1/.babelrc 43B
  3. redux-0.5.1/.eslintrc 349B
  4. redux-0.5.1/.gitignore 40B
  5. redux-0.5.1/.jshintrc 75B
  6. redux-0.5.1/.npmignore 13B
  7. redux-0.5.1/LICENSE 1.05KB
  8. redux-0.5.1/README.md 5.01KB
  9. redux-0.5.1/TODO 148B
  10. redux-0.5.1/examples/
  11. redux-0.5.1/examples/counter/
  12. redux-0.5.1/examples/counter/App.js 491B
  13. redux-0.5.1/examples/counter/Counter.js 517B
  14. redux-0.5.1/examples/counter/actions/
  15. redux-0.5.1/examples/counter/actions/CounterActions.js 542B
  16. redux-0.5.1/examples/counter/constants/
  17. redux-0.5.1/examples/counter/constants/ActionTypes.js 108B
  18. redux-0.5.1/examples/counter/stores/
  19. redux-0.5.1/examples/counter/stores/counterStore.js 523B
  20. redux-0.5.1/examples/counter/stores/index.js 43B
  21. redux-0.5.1/examples/index.html 157B
  22. redux-0.5.1/examples/index.js 206B
  23. redux-0.5.1/examples/server.js 420B
  24. redux-0.5.1/examples/todo/
  25. redux-0.5.1/examples/todo/App.js 303B
  26. redux-0.5.1/examples/todo/Body.js 415B
  27. redux-0.5.1/examples/todo/Header.js 443B
  28. redux-0.5.1/examples/todo/actions/
  29. redux-0.5.1/examples/todo/actions/index.js 133B
  30. redux-0.5.1/examples/todo/constants/
  31. redux-0.5.1/examples/todo/constants/ActionTypes.js 35B
  32. redux-0.5.1/examples/todo/stores/
  33. redux-0.5.1/examples/todo/stores/index.js 383B
  34. redux-0.5.1/examples/webpack.config.js 742B
  35. redux-0.5.1/package.json 1.2KB
  36. redux-0.5.1/scripts/
  37. redux-0.5.1/scripts/build 65B
  38. redux-0.5.1/src/
  39. redux-0.5.1/src/Container.js 1.98KB
  40. redux-0.5.1/src/Root.js 643B
  41. redux-0.5.1/src/addons/
  42. redux-0.5.1/src/addons/container.js 516B
  43. redux-0.5.1/src/addons/getDisplayName.js 119B
  44. redux-0.5.1/src/addons/root.js 448B
  45. redux-0.5.1/src/createDispatcher.js 3.4KB
  46. redux-0.5.1/src/index.js 207B

资源介绍:

一个可预测的全局状态管理的 JS 库 A JS library for predictable global state management
redux ========================= An experiment in fully hot-reloadable Flux. **The API might change any day.** _**Don't use in production.**_ ## Why another Flux framework? Read **[The Evolution of Flux Frameworks](https://medium.com/@dan_abramov/the-evolution-of-flux-frameworks-6c16ad26bb31)** for some context. ### Design Goals * Hot reloading of everything. * A hook for the future devtools to "commit" a state, and replay actions on top of it during hot reload. * No `createAction`, `createStores`, `wrapThisStuff`. Your stuff is your stuff. * I don't mind action constants. Seriously. * Keep Flux lingo. No cursors or observables in core. * Have I mentioned hot reloading yet? ## Demo ``` git clone https://github.com/gaearon/redux.git redux cd redux npm install npm start ``` ## What's it look like? ### Actions ```js // Still using constants... import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../constants/ActionTypes'; // But action creators are pure functions returning actions export function increment() { return { type: INCREMENT_COUNTER }; } export function decrement() { return { type: DECREMENT_COUNTER }; } // Can also be async if you return a function // (wow, much functions, so injectable :doge:) export function incrementAsync() { return dispatch => { setTimeout(() => { dispatch(increment()); }, 1000); }; } // Could also look into state in the callback form export function incrementIfOdd() { return (dispatch, state) => { if (state.counterStore.counter % 2 === 0) { return; } dispatch(increment()); }; } ``` ### Stores ```js // ... too, use constants import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../constants/ActionTypes'; // but you can write this part anyhow you like: const initialState = { counter: 0 }; function increment({ counter }) { return { counter: counter + 1 }; } function decrement({ counter }) { return { counter: counter - 1 }; } // what's important is that Store is a pure function too export default function counterStore(state = initialState, action) { // that returns the new state when an action comes switch (action.type) { case INCREMENT_COUNTER: return increment(state, action); case DECREMENT_COUNTER: return decrement(state, action); default: return state; } } // bonus: no special support needed for ImmutableJS, // just return its objects as the state. ``` ### Components #### Dumb Components ```js // The dumb component receives everything using props: import React, { PropTypes } from 'react'; export default class Counter { static propTypes = { counter: PropTypes.number.isRequired, increment: PropTypes.func.isRequired, decrement: PropTypes.func.isRequired }; render() { const { counter } = this.props; return ( <p> Clicked: {counter} times </p> ); } } ``` #### Smart Components ```js // The smart component may inject actions // and observe stores using <Container />: import React, { Component } from 'react'; import { Root, Container } from 'redux'; import { increment, decrement } from './actions/CounterActions'; import counterStore from './stores/counterStore'; import Counter from './Counter'; export default class CounterContainer { render() { // stores must be an array. // actions must be a string -> function map. // props passed to children will combine these actions and state. return ( <Container stores={[counterStore]} actions={{ increment, decrement }}> {props => <Counter {...props} />} </Container> ); } } ``` #### Decorators Don't want to separate dumb and smart components just yet? Use the decorators! They work exactly the same as the container components, but are lowercase: ```js import React, { PropTypes } from 'react'; import { increment, decrement } from './actions/CounterActions'; import { container } from 'redux'; import counterStore from './stores/counterStore'; @container({ actions: { increment, decrement }, stores: [counterStore] }) export default class Counter { static propTypes = { increment: PropTypes.func.isRequired, decrement: PropTypes.func.isRequired, counter: PropTypes.number.isRequired }; render() { return ( <p> Clicked: {this.props.counter} times {' '} <button onClick={() => this.props.increment()}>+</button> {' '} <button onClick={() => this.props.decrement()}>-</button> </p> ); } } ``` #### The root component ```js import React from 'react'; import { root } from 'redux'; import * from './stores/index'; // Let it know about all the stores @root(stores) export default class App { /* ... */ } ``` ## FAQ ### How does hot reloading work? * http://webpack.github.io/docs/hot-module-replacement.html * http://gaearon.github.io/react-hot-loader/ * those `module.hot` lines in the dispatcher example above ### Can I use this in production? I wouldn't. Many use cases are not be considered yet. If you find some use cases this lib can't handle yet, please file an issue.
100+评论
captcha
    相关资源
    类型标题大小时间
    ZIPredux-0.6.2.zip17.09KB8月前
    ZIPredux-0.6.0.zip16.98KB8月前
    ZIPredux-0.6.1.zip16.99KB8月前
    ZIPredux-0.7.0.zip17.21KB8月前
    ZIPredux-0.5.2.zip20.91KB8月前
    ZIPredux-0.5.3.zip21.01KB8月前
    ZIPalgorithm-journey-main.zip7.3MB8月前
    ZIPredux-thunk-2.0.0.zip8.34KB8月前