首页下载资源前端redux-2.1.0.zip

ZIPredux-2.1.0.zip

a373733724.71KB需要积分:1

资源文件列表:

redux-2.1.0.zip 大约有36个文件
  1. redux-2.1.0/
  2. redux-2.1.0/.babelrc 35B
  3. redux-2.1.0/.eslintignore 16B
  4. redux-2.1.0/.eslintrc 473B
  5. redux-2.1.0/.gitignore 55B
  6. redux-2.1.0/.npmignore 13B
  7. redux-2.1.0/.travis.yml 78B
  8. redux-2.1.0/CHANGELOG.md 107B
  9. redux-2.1.0/CODE_OF_CONDUCT.md 1.39KB
  10. redux-2.1.0/LICENSE.md 1.05KB
  11. redux-2.1.0/README.md 20.02KB
  12. redux-2.1.0/native.js 41B
  13. redux-2.1.0/package.json 1.88KB
  14. redux-2.1.0/src/
  15. redux-2.1.0/src/components/
  16. redux-2.1.0/src/components/createAll.js 253B
  17. redux-2.1.0/src/components/createConnect.js 6.67KB
  18. redux-2.1.0/src/components/createProvider.js 2.74KB
  19. redux-2.1.0/src/index.js 131B
  20. redux-2.1.0/src/native.js 138B
  21. redux-2.1.0/src/utils/
  22. redux-2.1.0/src/utils/createStoreShape.js 212B
  23. redux-2.1.0/src/utils/isPlainObject.js 641B
  24. redux-2.1.0/src/utils/shallowEqual.js 496B
  25. redux-2.1.0/src/utils/wrapActionCreators.js 175B
  26. redux-2.1.0/test/
  27. redux-2.1.0/test/components/
  28. redux-2.1.0/test/components/Provider.spec.js 7KB
  29. redux-2.1.0/test/components/connect.spec.js 30.15KB
  30. redux-2.1.0/test/utils/
  31. redux-2.1.0/test/utils/isPlainObject.spec.js 591B
  32. redux-2.1.0/test/utils/shallowEqual.spec.js 1.27KB
  33. redux-2.1.0/test/utils/wrapActionCreators.js 841B
  34. redux-2.1.0/webpack.config.base.js 612B
  35. redux-2.1.0/webpack.config.development.js 328B
  36. redux-2.1.0/webpack.config.production.js 442B

资源介绍:

一个可预测的全局状态管理的 JS 库 A JS library for predictable global state management
React Redux ========================= Official React bindings for [Redux](https://github.com/gaearon/redux). Performant and flexible. [![build status](https://img.shields.io/travis/rackt/react-redux/master.svg?style=flat-square)](https://travis-ci.org/rackt/react-redux) [![npm version](https://img.shields.io/npm/v/react-redux.svg?style=flat-square)](https://www.npmjs.com/package/react-redux) [![npm downloads](https://img.shields.io/npm/dm/react-redux.svg?style=flat-square)](https://www.npmjs.com/package/react-redux) [![redux channel on slack](https://img.shields.io/badge/slack-redux@reactiflux-61DAFB.svg?style=flat-square)](http://www.reactiflux.com) ## Table of Contents - [Installation](#installation) - [React Native](#react-native) - [Quick Start](#quick-start) - [API](#api) - [``](#provider-store) - [`connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])`](#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) - [Troubleshooting](#troubleshooting) - [License](#license) ## Installation ``` npm install --save react-redux ``` React Redux requires **React 0.13 or later.** ## React Native What you get from `react-redux` is for React. For React Native, import from `react-redux/native` instead. ## Quick Start React bindings for Redux embrace the idea of [dividing “smart” and “dumb” components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0). It is advisable that only top-level components of your app (such as route handlers, for example) are aware of Redux. Components below them should be “dumb” and receive all data via props.
Location Use React-Redux To read data, they To change data, they
“Smart” Components Top level, route handlers Yes Subscribe to Redux state Dispatch Redux actions
“Dumb” Components Middle and leaf components No Read data from props Invoke callbacks from props
### “Dumb” components are unaware of Redux Let’s say we have a `` “dumb” component with a number `value` prop, and an `onIncrement` function prop that it will call when user presses an “Increment” button: ```js import { Component } from 'react'; export default class Counter extends Component { render() { return ( ); } } ``` ### “Smart” components are `connect()`-ed to Redux Here’s how we hook it up to the Redux Store. We will use the `connect()` function provided by `react-redux` to turn a “dumb” `Counter` into a smart component. The `connect()` function lets you specify *which exact* state from the Redux store your component wants to track. This lets you subscribe on any level of granularity. ##### `containers/CounterContainer.js` ```js import { Component } from 'react'; import { connect } from 'react-redux'; import Counter from '../components/Counter'; import { increment } from '../actionsCreators'; // Which part of the Redux global state does our component want to receive as props? function mapStateToProps(state) { return { value: state.counter }; } // Which action creators does it want to receive by props? function mapDispatchToProps(dispatch) { return { onIncrement: () => dispatch(increment()) }; } export default connect( mapStateToProps, mapDispatchToProps )(Counter); // You can also pass an object instead of defining `mapDispatchToProps`: // export default connect(mapStateToProps, CounterActionCreators)(Counter); // Or you can pass `dispatch` down as a prop if you omit `mapDispatchToProps`: // export default connect(mapStateToProps)(Counter); // See more recipes in detailed connect() examples below. ``` Whether to put the `connect()` call in the same file as the “dumb” component, or separately, is up to you. Ask yourself whether you'd want to reuse this component but bind it to different data, or not. ### Nesting You can have many `connect()`-ed components in your app at any depth, and you can even nest them. It is, however, preferable that you try to only `connect()` top-level components such as route handlers, so the data flow in your application stays predictable. ### Support for Decorators You might have noticed that we used parens twice when calling `connect()`. This is called partial application, and it lets people use ES7’s proposed decorator syntax: ```js // Unstable syntax! It might change or break in production. @connect(mapStateToProps) export default class CounterContainer { ... } ``` Don’t forget decorators are experimental! They desugar to function calls anyway as the example above demonstrates. ### Additional Flexibility This is the most basic usage, but `connect()` supports many other patterns: just passing the vanilla `dispatch()` function down, binding multiple action creators, passing them in an `actions` prop, selecting parts of state and binding action creators depending on `props`, and so on. Check out the `connect()` docs below to learn more. ### Injecting Redux Store Finally, how do we actually hook it up to the Redux store? We need to create the store somewhere at the root of our component hierarchy. For client apps, the root component is a good place. For server rendering, you can do this in the request handler. The trick is to wrap the whole view hierarchy into a `{() => ... }` where `Provider` is imported from `react-redux`. One gotcha is that **the child of `Provider` must be a function**. This is to work around an issue about how context (undocumented feature we have to rely on to pass Redux data to components below) works in React 0.13. In React 0.14, you will be able to put your view hierarchy in `` without wrapping it into a function. ```js import { Component } from 'react'; import { Provider } from 'react-redux'; class App extends Component { render() { // ... } } const targetEl = document.getElementById('root'); React.render(( {() => } ), targetEl); ``` ## API ### `` Makes the Redux store available to the `connect()` calls in the component hierarchy below. Normally, you can’t use `connect()` without wrapping the root component in ``. (If you *really* need to, you can manually pass `store` as a prop to every `connect()`ed component, but we only recommend to do this for stubbing `store` in unit tests, or in non-fully-React codebases. Normally, you should just use ``.) #### Props * `store`: (*[Redux Store](http://gaearon.github.io/redux/docs/api/Store.html)*): The single Redux store in your application. * `children`: (*Function*): Unlike most React components, `` accepts a [function as a child](#child-must-be-a-function) with your root component. This is a temporary workaround for a React 0.13 context issue, which will be fixed when React 0.14 comes out. #### Example ##### Vanilla React ```js React.render( {() => } , rootEl ); ``` ##### React Router 0.13 ```js Router.run(routes, Router.HistoryLocation, (Handler, routerState) => { // note "routerState" here React.render( {() => } // note "routerState" here: important to pass it down , document.getElementById('root') ); }); ``` ##### React Router 1.0 ```js React.render( {() =>
100+评论
captcha

    相关资源

    1. redux-2.1.2.zip

      a3737337#前端ZIP24.89KB6月前
      资源摘要:一个可预测的全局状态管理的 JS 库A JS library for predictable global state management

    2. redux-1.0.1.zip

      a3737337#前端ZIP155.91KB6月前
      资源摘要:一个可预测的全局状态管理的 JS 库A JS library for predictable global state management

    3. redux-2.1.1.zip

      a3737337#前端ZIP24.89KB6月前
      资源摘要:一个可预测的全局状态管理的 JS 库A JS library for predictable global state management

    4. redux-3.0.1.zip

      a3737337#前端ZIP175.11KB6月前
      资源摘要:一个可预测的全局状态管理的 JS 库A JS library for predictable global state management

    5. redux-1.0.0.zip

      a3737337#前端ZIP154.42KB6月前
      资源摘要:一个可预测的全局状态管理的 JS 库A JS library for predictable global state management

    6. redux-1.0.0-alpha.zip

      a3737337#前端ZIP55.74KB6月前
      资源摘要:一个可预测的全局状态管理的 JS 库A JS library for predictable global state management

    7. redux-0.11.1.zip

      a3737337#前端ZIP34.29KB6月前
      资源摘要:一个可预测的全局状态管理的 JS 库A JS library for predictable global state management

    8. redux-1.0.0-rc.zip

      a3737337#前端ZIP47.2KB6月前
      资源摘要:一个可预测的全局状态管理的 JS 库A JS library for predictable global state management
    站长QQ:九六九五七三七