diff --git a/docs/Glossary.md b/docs/Glossary.md index f1e2265239..de724b1ca1 100644 --- a/docs/Glossary.md +++ b/docs/Glossary.md @@ -58,7 +58,7 @@ type Dispatch = (a: Action | AsyncAction) => any A _dispatching function_ (or simply _dispatch function_) is a function that accepts an action or an [async action](#async-action); it then may or may not dispatch one or more actions to the store. -We must distinguish between dispatching functions in general and the base [`dispatch`](api/Store.md#dispatch) function provided by the store instance without any middleware. +We must distinguish between dispatching functions in general and the base [`dispatch`](api/Store.md#dispatchaction) function provided by the store instance without any middleware. The base dispatch function _always_ synchronously sends an action to the store's reducer, along with the previous state returned by the store, to calculate a new state. It expects actions to be plain objects ready to be consumed by the reducer. @@ -72,7 +72,7 @@ type ActionCreator = (...args: any) => Action | AsyncAction An _action creator_ is, quite simply, a function that creates an action. Do not confuse the two terms—again, an action is a payload of information, and an action creator is a factory that creates an action. -Calling an action creator only produces an action, but does not dispatch it. You need to call the store's [`dispatch`](api/Store.md#dispatch) function to actually cause the mutation. Sometimes we say _bound action creators_ to mean functions that call an action creator and immediately dispatch its result to a specific store instance. +Calling an action creator only produces an action, but does not dispatch it. You need to call the store's [`dispatch`](api/Store.md#dispatchaction) function to actually cause the mutation. Sometimes we say _bound action creators_ to mean functions that call an action creator and immediately dispatch its result to a specific store instance. If an action creator needs to read the current state, perform an API call, or cause a side effect, like a routing transition, it should return an [async action](#async-action) instead of an action. @@ -82,7 +82,7 @@ If an action creator needs to read the current state, perform an API call, or ca type AsyncAction = any ``` -An _async action_ is a value that is sent to a dispatching function, but is not yet ready for consumption by the reducer. It will be transformed by [middleware](#middleware) into an action (or a series of actions) before being sent to the base [`dispatch()`](api/Store.md#dispatch) function. Async actions may have different types, depending on the middleware you use. They are often asynchronous primitives, like a Promise or a thunk, which are not passed to the reducer immediately, but trigger action dispatches once an operation has completed. +An _async action_ is a value that is sent to a dispatching function, but is not yet ready for consumption by the reducer. It will be transformed by [middleware](#middleware) into an action (or a series of actions) before being sent to the base [`dispatch()`](api/Store.md#dispatchaction) function. Async actions may have different types, depending on the middleware you use. They are often asynchronous primitives, like a Promise or a thunk, which are not passed to the reducer immediately, but trigger action dispatches once an operation has completed. ## Middleware @@ -111,12 +111,12 @@ type Store = { A store is an object that holds the application's state tree. There should only be a single store in a Redux app, as the composition happens on the reducer level. -- [`dispatch(action)`](api/Store.md#dispatch) is the base dispatch function described above. +- [`dispatch(action)`](api/Store.md#dispatchaction) is the base dispatch function described above. - [`getState()`](api/Store.md#getState) returns the current state of the store. -- [`subscribe(listener)`](api/Store.md#subscribe) registers a function to be called on state changes. -- [`replaceReducer(nextReducer)`](api/Store.md#replaceReducer) can be used to implement hot reloading and code splitting. Most likely you won't use it. +- [`subscribe(listener)`](api/Store.md#subscribelistener) registers a function to be called on state changes. +- [`replaceReducer(nextReducer)`](api/Store.md#replacereducernextreducer) can be used to implement hot reloading and code splitting. Most likely you won't use it. -See the complete [store API reference](api/Store.md#dispatch) for more details. +See the complete [store API reference](api/Store.md#dispatchaction) for more details. ## Store creator diff --git a/docs/Troubleshooting.md b/docs/Troubleshooting.md index 27d89aaee8..3396f25b19 100644 --- a/docs/Troubleshooting.md +++ b/docs/Troubleshooting.md @@ -128,7 +128,7 @@ Note that experimental language features are subject to change. Also keep an eye out for nested state objects that need to be deeply copied. Both `_.extend` and `Object.assign` make a shallow copy of the state. See [Updating Nested Objects](./recipes/structuring-reducers/ImmutableUpdatePatterns.md#updating-nested-objects) for suggestions on how to deal with nested state objects. -#### Don't forget to call [`dispatch(action)`](api/Store.md#dispatch) +#### Don't forget to call [`dispatch(action)`](api/Store.md#dispatchaction) If you define an action creator, calling it will _not_ automatically dispatch the action. For example, this code will do nothing: @@ -160,7 +160,7 @@ class AddTodo extends Component { It doesn't work because your action creator is just a function that _returns_ an action. It is up to you to actually dispatch it. We can't bind your action creators to a particular Store instance during the definition because apps that render on the server need a separate Redux store for every request. -The fix is to call [`dispatch()`](api/Store.md#dispatch) method on the [store](api/Store.md) instance: +The fix is to call [`dispatch()`](api/Store.md#dispatchaction) method on the [store](api/Store.md) instance: ```js handleClick() { diff --git a/docs/advanced/AsyncFlow.md b/docs/advanced/AsyncFlow.md index af061b4ccf..5bb4759739 100644 --- a/docs/advanced/AsyncFlow.md +++ b/docs/advanced/AsyncFlow.md @@ -11,7 +11,7 @@ Without [middleware](Middleware.md), Redux store only supports [synchronous data You may enhance [`createStore()`](../api/createStore.md) with [`applyMiddleware()`](../api/applyMiddleware.md). It is not required, but it lets you [express asynchronous actions in a convenient way](AsyncActions.md). -Asynchronous middleware like [redux-thunk](https://github.com/gaearon/redux-thunk) or [redux-promise](https://github.com/acdlite/redux-promise) wraps the store's [`dispatch()`](../api/Store.md#dispatch) method and allows you to dispatch something other than actions, for example, functions or Promises. Any middleware you use can then intercept anything you dispatch, and in turn, can pass actions to the next middleware in the chain. For example, a Promise middleware can intercept Promises and dispatch a pair of begin/end actions asynchronously in response to each Promise. +Asynchronous middleware like [redux-thunk](https://github.com/gaearon/redux-thunk) or [redux-promise](https://github.com/acdlite/redux-promise) wraps the store's [`dispatch()`](../api/Store.md#dispatchaction) method and allows you to dispatch something other than actions, for example, functions or Promises. Any middleware you use can then intercept anything you dispatch, and in turn, can pass actions to the next middleware in the chain. For example, a Promise middleware can intercept Promises and dispatch a pair of begin/end actions asynchronously in response to each Promise. When the last middleware in the chain dispatches an action, it has to be a plain object. This is when the [synchronous Redux data flow](../basics/DataFlow.md) takes place. diff --git a/docs/advanced/Middleware.md b/docs/advanced/Middleware.md index bbc1e52256..a573d2a32c 100644 --- a/docs/advanced/Middleware.md +++ b/docs/advanced/Middleware.md @@ -29,7 +29,7 @@ How do we approach this with Redux? ### Attempt #1: Logging Manually -The most naïve solution is just to log the action and the next state yourself every time you call [`store.dispatch(action)`](../api/Store.md#dispatch). It's not really a solution, but just a first step towards understanding the problem. +The most naïve solution is just to log the action and the next state yourself every time you call [`store.dispatch(action)`](../api/Store.md#dispatchaction). It's not really a solution, but just a first step towards understanding the problem. > ##### Note > @@ -266,7 +266,7 @@ function applyMiddleware(store, middlewares) { The implementation of [`applyMiddleware()`](../api/applyMiddleware.md) that ships with Redux is similar, but **different in three important aspects**: -- It only exposes a subset of the [store API](../api/Store.md) to the middleware: [`dispatch(action)`](../api/Store.md#dispatch) and [`getState()`](../api/Store.md#getState). +- It only exposes a subset of the [store API](../api/Store.md) to the middleware: [`dispatch(action)`](../api/Store.md#dispatchaction) and [`getState()`](../api/Store.md#getState). - It does a bit of trickery to make sure that if you call `store.dispatch(action)` from your middleware instead of `next(action)`, the action will actually travel the whole middleware chain again, including the current middleware. This is useful for asynchronous middleware, as we have seen [previously](AsyncActions.md). There is one caveat when calling `dispatch` during setup, described below. diff --git a/docs/api/README.md b/docs/api/README.md index 40639ac2e2..7c6737dbb9 100644 --- a/docs/api/README.md +++ b/docs/api/README.md @@ -23,9 +23,9 @@ This section documents the complete Redux API. Keep in mind that Redux is only c - [Store](Store.md) - [getState()](Store.md#getState) - - [dispatch(action)](Store.md#dispatch) - - [subscribe(listener)](Store.md#subscribe) - - [replaceReducer(nextReducer)](Store.md#replaceReducer) + - [dispatch(action)](Store.md#dispatchaction) + - [subscribe(listener)](Store.md#subscribelistener) + - [replaceReducer(nextReducer)](Store.md#replacereducernextreducer) ### Importing diff --git a/docs/api/Store.md b/docs/api/Store.md index 982db58587..a1e3531009 100644 --- a/docs/api/Store.md +++ b/docs/api/Store.md @@ -90,13 +90,13 @@ store.dispatch(addTodo('Read about the middleware')) Adds a change listener. It will be called any time an action is dispatched, and some part of the state tree may potentially have changed. You may then call [`getState()`](#getState) to read the current state tree inside the callback. -You may call [`dispatch()`](#dispatch) from a change listener, with the following caveats: +You may call [`dispatch()`](#dispatchaction) from a change listener, with the following caveats: -1. The listener should only call [`dispatch()`](#dispatch) either in response to user actions or under specific conditions (e. g. dispatching an action when the store has a specific field). Calling [`dispatch()`](#dispatch) without any conditions is technically possible, however it leads to an infinite loop as every [`dispatch()`](#dispatch) call usually triggers the listener again. +1. The listener should only call [`dispatch()`](#dispatchaction) either in response to user actions or under specific conditions (e. g. dispatching an action when the store has a specific field). Calling [`dispatch()`](#dispatchaction) without any conditions is technically possible, however it leads to an infinite loop as every [`dispatch()`](#dispatchaction) call usually triggers the listener again. -2. The subscriptions are snapshotted just before every [`dispatch()`](#dispatch) call. If you subscribe or unsubscribe while the listeners are being invoked, this will not have any effect on the [`dispatch()`](#dispatch) that is currently in progress. However, the next [`dispatch()`](#dispatch) call, whether nested or not, will use a more recent snapshot of the subscription list. +2. The subscriptions are snapshotted just before every [`dispatch()`](#dispatchaction) call. If you subscribe or unsubscribe while the listeners are being invoked, this will not have any effect on the [`dispatch()`](#dispatchaction) that is currently in progress. However, the next [`dispatch()`](#dispatchaction) call, whether nested or not, will use a more recent snapshot of the subscription list. -3. The listener should not expect to see all state changes, as the state might have been updated multiple times during a nested [`dispatch()`](#dispatch) before the listener is called. It is, however, guaranteed that all subscribers registered before the [`dispatch()`](#dispatch) started will be called with the latest state by the time it exits. +3. The listener should not expect to see all state changes, as the state might have been updated multiple times during a nested [`dispatch()`](#dispatchaction) before the listener is called. It is, however, guaranteed that all subscribers registered before the [`dispatch()`](#dispatchaction) started will be called with the latest state by the time it exits. It is a low-level API. Most likely, instead of using it directly, you'll use React (or other) bindings. If you commonly use the callback as a hook to react to state changes, you might want to [write a custom `observeStore` utility](https://github.com/reduxjs/redux/issues/303#issuecomment-125184409). The `Store` is also an [`Observable`](https://github.com/zenparsing/es-observable), so you can `subscribe` to changes with libraries like [RxJS](https://github.com/ReactiveX/RxJS). diff --git a/docs/api/applyMiddleware.md b/docs/api/applyMiddleware.md index 63f310bdeb..39bb8971fc 100644 --- a/docs/api/applyMiddleware.md +++ b/docs/api/applyMiddleware.md @@ -7,17 +7,17 @@ hide_title: true # `applyMiddleware(...middleware)` -Middleware is the suggested way to extend Redux with custom functionality. Middleware lets you wrap the store's [`dispatch`](Store.md#dispatch) method for fun and profit. The key feature of middleware is that it is composable. Multiple middleware can be combined together, where each middleware requires no knowledge of what comes before or after it in the chain. +Middleware is the suggested way to extend Redux with custom functionality. Middleware lets you wrap the store's [`dispatch`](Store.md#dispatchaction) method for fun and profit. The key feature of middleware is that it is composable. Multiple middleware can be combined together, where each middleware requires no knowledge of what comes before or after it in the chain. The most common use case for middleware is to support asynchronous actions without much boilerplate code or a dependency on a library like [Rx](https://github.com/Reactive-Extensions/RxJS). It does so by letting you dispatch [async actions](../Glossary.md#async-action) in addition to normal actions. -For example, [redux-thunk](https://github.com/gaearon/redux-thunk) lets the action creators invert control by dispatching functions. They would receive [`dispatch`](Store.md#dispatch) as an argument and may call it asynchronously. Such functions are called _thunks_. Another example of middleware is [redux-promise](https://github.com/acdlite/redux-promise). It lets you dispatch a [Promise](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise) async action, and dispatches a normal action when the Promise resolves. +For example, [redux-thunk](https://github.com/gaearon/redux-thunk) lets the action creators invert control by dispatching functions. They would receive [`dispatch`](Store.md#dispatchaction) as an argument and may call it asynchronously. Such functions are called _thunks_. Another example of middleware is [redux-promise](https://github.com/acdlite/redux-promise). It lets you dispatch a [Promise](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise) async action, and dispatches a normal action when the Promise resolves. -Middleware is not baked into [`createStore`](createStore.md) and is not a fundamental part of the Redux architecture, but we consider it useful enough to be supported right in the core. This way, there is a single standard way to extend [`dispatch`](Store.md#dispatch) in the ecosystem, and different middleware may compete in expressiveness and utility. +Middleware is not baked into [`createStore`](createStore.md) and is not a fundamental part of the Redux architecture, but we consider it useful enough to be supported right in the core. This way, there is a single standard way to extend [`dispatch`](Store.md#dispatchaction) in the ecosystem, and different middleware may compete in expressiveness and utility. #### Arguments -- `...middleware` (_arguments_): Functions that conform to the Redux _middleware API_. Each middleware receives [`Store`](Store.md)'s [`dispatch`](Store.md#dispatch) and [`getState`](Store.md#getState) functions as named arguments, and returns a function. That function will be given the `next` middleware's dispatch method, and is expected to return a function of `action` calling `next(action)` with a potentially different argument, or at a different time, or maybe not calling it at all. The last middleware in the chain will receive the real store's [`dispatch`](Store.md#dispatch) method as the `next` parameter, thus ending the chain. So, the middleware signature is `({ getState, dispatch }) => next => action`. +- `...middleware` (_arguments_): Functions that conform to the Redux _middleware API_. Each middleware receives [`Store`](Store.md)'s [`dispatch`](Store.md#dispatchaction) and [`getState`](Store.md#getState) functions as named arguments, and returns a function. That function will be given the `next` middleware's dispatch method, and is expected to return a function of `action` calling `next(action)` with a potentially different argument, or at a different time, or maybe not calling it at all. The last middleware in the chain will receive the real store's [`dispatch`](Store.md#dispatchaction) method as the `next` parameter, thus ending the chain. So, the middleware signature is `({ getState, dispatch }) => next => action`. #### Returns @@ -197,7 +197,7 @@ export default connect(state => ({ #### Tips -- Middleware only wraps the store's [`dispatch`](Store.md#dispatch) function. Technically, anything a middleware can do, you can do manually by wrapping every `dispatch` call, but it's easier to manage this in a single place and define action transformations on the scale of the whole project. +- Middleware only wraps the store's [`dispatch`](Store.md#dispatchaction) function. Technically, anything a middleware can do, you can do manually by wrapping every `dispatch` call, but it's easier to manage this in a single place and define action transformations on the scale of the whole project. - If you use other store enhancers in addition to `applyMiddleware`, make sure to put `applyMiddleware` before them in the composition chain because the middleware is potentially asynchronous. For example, it should go before [redux-devtools](https://github.com/reduxjs/redux-devtools) because otherwise the DevTools won't see the raw actions emitted by the Promise middleware and such. diff --git a/docs/api/bindActionCreators.md b/docs/api/bindActionCreators.md index 94af4448b7..a0afb131b9 100644 --- a/docs/api/bindActionCreators.md +++ b/docs/api/bindActionCreators.md @@ -7,11 +7,11 @@ hide_title: true # `bindActionCreators(actionCreators, dispatch)` -Turns an object whose values are [action creators](../Glossary.md#action-creator), into an object with the same keys, but with every action creator wrapped into a [`dispatch`](Store.md#dispatch) call so they may be invoked directly. +Turns an object whose values are [action creators](../Glossary.md#action-creator), into an object with the same keys, but with every action creator wrapped into a [`dispatch`](Store.md#dispatchaction) call so they may be invoked directly. -Normally you should just call [`dispatch`](Store.md#dispatch) directly on your [`Store`](Store.md) instance. If you use Redux with React, [react-redux](https://github.com/gaearon/react-redux) will provide you with the [`dispatch`](Store.md#dispatch) function so you can call it directly, too. +Normally you should just call [`dispatch`](Store.md#dispatchaction) directly on your [`Store`](Store.md) instance. If you use Redux with React, [react-redux](https://github.com/gaearon/react-redux) will provide you with the [`dispatch`](Store.md#dispatchaction) function so you can call it directly, too. -The only use case for `bindActionCreators` is when you want to pass some action creators down to a component that isn't aware of Redux, and you don't want to pass [`dispatch`](Store.md#dispatch) or the Redux store to it. +The only use case for `bindActionCreators` is when you want to pass some action creators down to a component that isn't aware of Redux, and you don't want to pass [`dispatch`](Store.md#dispatchaction) or the Redux store to it. For convenience, you can also pass an action creator as the first argument, and get a dispatch wrapped function in return. @@ -19,7 +19,7 @@ For convenience, you can also pass an action creator as the first argument, and 1. `actionCreators` (_Function_ or _Object_): An [action creator](../Glossary.md#action-creator), or an object whose values are action creators. -2. `dispatch` (_Function_): A [`dispatch`](Store.md#dispatch) function available on the [`Store`](Store.md) instance. +2. `dispatch` (_Function_): A [`dispatch`](Store.md#dispatchaction) function available on the [`Store`](Store.md) instance. #### Returns diff --git a/docs/api/createStore.md b/docs/api/createStore.md index 772734472b..569776cfa1 100644 --- a/docs/api/createStore.md +++ b/docs/api/createStore.md @@ -20,7 +20,7 @@ There should only be a single store in your app. #### Returns -([_`Store`_](Store.md)): An object that holds the complete state of your app. The only way to change its state is by [dispatching actions](Store.md#dispatch). You may also [subscribe](Store.md#subscribe) to the changes to its state to update the UI. +([_`Store`_](Store.md)): An object that holds the complete state of your app. The only way to change its state is by [dispatching actions](Store.md#dispatchaction). You may also [subscribe](Store.md#subscribelistener) to the changes to its state to update the UI. #### Example diff --git a/docs/basics/Actions.md b/docs/basics/Actions.md index 0174b3ca74..01bc6b9cdb 100644 --- a/docs/basics/Actions.md +++ b/docs/basics/Actions.md @@ -9,7 +9,7 @@ hide_title: true First, let's define some actions. -**Actions** are payloads of information that send data from your application to your store. They are the _only_ source of information for the store. You send them to the store using [`store.dispatch()`](../api/Store.md#dispatch). +**Actions** are payloads of information that send data from your application to your store. They are the _only_ source of information for the store. You send them to the store using [`store.dispatch()`](../api/Store.md#dispatchaction). Here's an example action which represents adding a new todo item: @@ -107,7 +107,7 @@ boundAddTodo(text) boundCompleteTodo(index) ``` -The `dispatch()` function can be accessed directly from the store as [`store.dispatch()`](../api/Store.md#dispatch), but more likely you'll access it using a helper like [react-redux](http://github.com/gaearon/react-redux)'s `connect()`. You can use [`bindActionCreators()`](../api/bindActionCreators.md) to automatically bind many action creators to a `dispatch()` function. +The `dispatch()` function can be accessed directly from the store as [`store.dispatch()`](../api/Store.md#dispatchaction), but more likely you'll access it using a helper like [react-redux](http://github.com/gaearon/react-redux)'s `connect()`. You can use [`bindActionCreators()`](../api/bindActionCreators.md) to automatically bind many action creators to a `dispatch()` function. Action creators can also be asynchronous and have side-effects. You can read about [async actions](../advanced/AsyncActions.md) in the [advanced tutorial](../advanced/README.md) to learn how to handle AJAX responses and compose action creators into async control flow. Don't skip ahead to async actions until you've completed the basics tutorial, as it covers other important concepts that are prerequisite for the advanced tutorial and async actions. diff --git a/docs/basics/DataFlow.md b/docs/basics/DataFlow.md index a1015f9dee..07f664685b 100644 --- a/docs/basics/DataFlow.md +++ b/docs/basics/DataFlow.md @@ -15,7 +15,7 @@ If you're still not convinced, read [Motivation](../introduction/Motivation.md) The data lifecycle in any Redux app follows these 4 steps: -1. **You call** [`store.dispatch(action)`](../api/Store.md#dispatch). +1. **You call** [`store.dispatch(action)`](../api/Store.md#dispatchaction). An [action](Actions.md) is a plain object describing _what happened_. For example: @@ -27,7 +27,7 @@ An [action](Actions.md) is a plain object describing _what happened_. For exampl Think of an action as a very brief snippet of news. “Mary liked article 42.” or “'Read the Redux docs.' was added to the list of todos.” -You can call [`store.dispatch(action)`](../api/Store.md#dispatch) from anywhere in your app, including components and XHR callbacks, or even at scheduled intervals. +You can call [`store.dispatch(action)`](../api/Store.md#dispatchaction) from anywhere in your app, including components and XHR callbacks, or even at scheduled intervals. 2. **The Redux store calls the reducer function you gave it.** @@ -100,7 +100,7 @@ While [`combineReducers()`](../api/combineReducers.md) is a handy helper utility 4. **The Redux store saves the complete state tree returned by the root reducer.** -This new tree is now the next state of your app! Every listener registered with [`store.subscribe(listener)`](../api/Store.md#subscribe) will now be invoked; listeners may call [`store.getState()`](../api/Store.md#getState) to get the current state. +This new tree is now the next state of your app! Every listener registered with [`store.subscribe(listener)`](../api/Store.md#subscribelistener) will now be invoked; listeners may call [`store.getState()`](../api/Store.md#getState) to get the current state. Now, the UI can be updated to reflect the new state. If you use bindings like [React Redux](https://github.com/gaearon/react-redux), this is the point at which `component.setState(newState)` is called. diff --git a/docs/basics/Store.md b/docs/basics/Store.md index 28233de626..2a642d4b11 100644 --- a/docs/basics/Store.md +++ b/docs/basics/Store.md @@ -13,9 +13,9 @@ The **Store** is the object that brings them together. The store has the followi - Holds application state; - Allows access to state via [`getState()`](../api/Store.md#getState); -- Allows state to be updated via [`dispatch(action)`](../api/Store.md#dispatch); -- Registers listeners via [`subscribe(listener)`](../api/Store.md#subscribe); -- Handles unregistering of listeners via the function returned by [`subscribe(listener)`](../api/Store.md#subscribe). +- Allows state to be updated via [`dispatch(action)`](../api/Store.md#dispatchaction); +- Registers listeners via [`subscribe(listener)`](../api/Store.md#subscribelistener); +- Handles unregistering of listeners via the function returned by [`subscribe(listener)`](../api/Store.md#subscribelistener). It's important to note that you'll only have a single store in a Redux application. When you want to split your data handling logic, you'll use [reducer composition](Reducers.md#splitting-reducers) instead of many stores. diff --git a/docs/basics/UsageWithReact.md b/docs/basics/UsageWithReact.md index 096182d8ce..3bc00bb07f 100644 --- a/docs/basics/UsageWithReact.md +++ b/docs/basics/UsageWithReact.md @@ -68,7 +68,7 @@ React bindings for Redux separate _presentational_ components from _container_ c Most of the components we'll write will be presentational, but we'll need to generate a few container components to connect them to the Redux store. This and the design brief below do not imply container components must be near the top of the component tree. If a container component becomes too complex (i.e. it has heavily nested presentational components with countless callbacks being passed down), introduce another container within the component tree as noted in the [FAQ](../faq/ReactRedux.md#should-i-only-connect-my-top-component-or-can-i-connect-multiple-components-in-my-tree). -Technically you could write the container components by hand using [`store.subscribe()`](../api/Store.md#subscribe). We don't advise you to do this because React Redux makes many performance optimizations that are hard to do by hand. For this reason, rather than write container components, we will generate them using the [`connect()`](https://react-redux.js.org/api/connect#connect) function provided by React Redux, as you will see below. +Technically you could write the container components by hand using [`store.subscribe()`](../api/Store.md#subscribelistener). We don't advise you to do this because React Redux makes many performance optimizations that are hard to do by hand. For this reason, rather than write container components, we will generate them using the [`connect()`](https://react-redux.js.org/api/connect#connect) function provided by React Redux, as you will see below. ## Designing Component Hierarchy @@ -228,7 +228,7 @@ export default Footer ### Implementing Container Components -Now it's time to hook up those presentational components to Redux by creating some containers. Technically, a container component is just a React component that uses [`store.subscribe()`](../api/Store.md#subscribe) to read a part of the Redux state tree and supply props to a presentational component it renders. You could write a container component by hand, but we suggest instead generating container components with the React Redux library's [`connect()`](https://react-redux.js.org/using-react-redux/connect-mapstate) function, which provides many useful optimizations to prevent unnecessary re-renders. (One result of this is that you shouldn't have to worry about the [React performance suggestion](https://facebook.github.io/react/docs/advanced-performance.html) of implementing `shouldComponentUpdate` yourself.) +Now it's time to hook up those presentational components to Redux by creating some containers. Technically, a container component is just a React component that uses [`store.subscribe()`](../api/Store.md#subscribelistener) to read a part of the Redux state tree and supply props to a presentational component it renders. You could write a container component by hand, but we suggest instead generating container components with the React Redux library's [`connect()`](https://react-redux.js.org/using-react-redux/connect-mapstate) function, which provides many useful optimizations to prevent unnecessary re-renders. (One result of this is that you shouldn't have to worry about the [React performance suggestion](https://facebook.github.io/react/docs/advanced-performance.html) of implementing `shouldComponentUpdate` yourself.) To use `connect()`, you need to define a special function called `mapStateToProps` that describes how to transform the current Redux store state into the props you want to pass to a presentational component you are wrapping. For example, `VisibleTodoList` needs to calculate `todos` to pass to the `TodoList`, so we define a function that filters the `state.todos` according to the `state.visibilityFilter`, and use it in its `mapStateToProps`: @@ -252,7 +252,7 @@ const mapStateToProps = state => { } ``` -In addition to reading the state, container components can dispatch actions. In a similar fashion, you can define a function called `mapDispatchToProps()` that receives the [`dispatch()`](../api/Store.md#dispatch) method and returns callback props that you want to inject into the presentational component. For example, we want the `VisibleTodoList` to inject a prop called `onTodoClick` into the `TodoList` component, and we want `onTodoClick` to dispatch a `TOGGLE_TODO` action: +In addition to reading the state, container components can dispatch actions. In a similar fashion, you can define a function called `mapDispatchToProps()` that receives the [`dispatch()`](../api/Store.md#dispatchaction) method and returns callback props that you want to inject into the presentational component. For example, we want the `VisibleTodoList` to inject a prop called `onTodoClick` into the `TodoList` component, and we want `onTodoClick` to dispatch a `TOGGLE_TODO` action: ```js const mapDispatchToProps = dispatch => { diff --git a/docs/recipes/ReducingBoilerplate.md b/docs/recipes/ReducingBoilerplate.md index e5adb02ee0..a851d648a9 100644 --- a/docs/recipes/ReducingBoilerplate.md +++ b/docs/recipes/ReducingBoilerplate.md @@ -163,7 +163,7 @@ There are also utility libraries to aid in generating action creators, such as [ [Middleware](../Glossary.md#middleware) lets you inject custom logic that interprets every action object before it is dispatched. Async actions are the most common use case for middleware. -Without any middleware, [`dispatch`](../api/Store.md#dispatch) only accepts a plain object, so we have to perform AJAX calls inside our components: +Without any middleware, [`dispatch`](../api/Store.md#dispatchaction) only accepts a plain object, so we have to perform AJAX calls inside our components: #### `actionCreators.js` diff --git a/src/createStore.js b/src/createStore.js index efb89310fd..cef9a2ecae 100644 --- a/src/createStore.js +++ b/src/createStore.js @@ -126,7 +126,7 @@ export default function createStore(reducer, preloadedState, enhancer) { 'You may not call store.subscribe() while the reducer is executing. ' + 'If you would like to be notified after the store has been updated, subscribe from a ' + 'component and invoke store.getState() in the callback to access the latest state. ' + - 'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.' + 'See https://redux.js.org/api-reference/store#subscribelistener for more details.' ) } @@ -143,7 +143,7 @@ export default function createStore(reducer, preloadedState, enhancer) { if (isDispatching) { throw new Error( 'You may not unsubscribe from a store listener while the reducer is executing. ' + - 'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.' + 'See https://redux.js.org/api-reference/store#subscribelistener for more details.' ) }