Redux is a predictable state container for JavaScript apps.
(If you’re looking for a WordPress framework, check out Redux Framework.)

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

You can use Redux together with React, or with any other view library.
It is tiny (2kB, including dependencies).

Learn Redux from its creator:
Part 1: Getting Started with Redux (30 free videos)

Part 2: Building React Applications with Idiomatic Redux (27 free videos)

Testimonials

“Love what you’re doing with Redux”
Jing Chen, creator of Flux

“I asked for comments on Redux in FB’s internal JS discussion group, and it was universally praised. Really awesome work.”
Bill Fisher, author of Flux documentation

“It’s cool that you are inventing a better Flux by not doing Flux at all.”
André Staltz, creator of Cycle

Before Proceeding Further

Also read:
You Might Not Need Redux

Developer Experience

I wrote Redux while working on my React Europe talk called “Hot Reloading with Time Travel”. My goal was to create a state management library with minimal API but completely predictable behavior, so it is possible to implement logging, hot reloading, time travel, universal apps, record and replay, without any buy-in from the developer.

Influences

Redux evolves the ideas of Flux, but avoids its complexity by taking cues from Elm.
Whether you have used them or not, Redux only takes a few minutes to get started with.

React Router

React Router is a complete routing library for React.

React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.

v4 Is Coming

The next version of React Router (v4) is in beta now.

v4 Documentation

Docs & Help

• Tutorial – do this first!
• Guides and API docs (v2, v3)
• Troubleshooting guide
• Changelog
• Stack Overflow
• CodePen boilerplate for bug reports

Older Versions:

• 0.13.x - docs / guides / code / upgrade guide
• 1.0.x - docs / code / upgrade guide

For questions and support, please visit our channel on Reactiflux or Stack Overflow.

Browser Support

React ·

React is a JavaScript library for building user interfaces.

• Declarative: React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
• Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
• Learn Once, Write Anywhere: We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.

Learn how to use React in your own project.

Examples

We have several examples on the website. Here is the first one to get you started:

1
2
3
4
5
6
7
8
9
10

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('container')
);

This example will render “Hello John” into a container on the page.

You’ll notice that we used an HTML-like syntax; we call it JSX. JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. We recommend using Babel with a React preset to convert JSX into native JavaScript for browsers to digest.

react-router-redux

Keep your router in sync with application state :sparkles:

Formerly known as redux-simple-router

You’re a smart person. You use Redux to manage your application state. You use React Router to do routing. All is good.

But the two libraries don’t coordinate. You want to do time travel with your application state, but React Router doesn’t navigate between pages when you replay actions. It controls an important part of application state: the URL.

This library helps you keep that bit of state in sync with your Redux store. We keep a copy of the current location hidden in state. When you rewind your application state with a tool like Redux DevTools, that state change is propagated to React Router so it can adjust the component tree accordingly. You can jump around in state, rewinding, replaying, and resetting as much as you’d like, and this library will ensure the two stay in sync at all times.

This library is not necessary for using Redux together with React Router. You can use the two together just fine without any additional libraries. It is useful if you care about recording, persisting, and replaying user actions, using time travel. If you don’t care about these features, just use Redux and React Router directly.

Installation

1

npm install --save react-router-redux

How It Works

This library allows you to use React Router’s APIs as they are documented. And, you can use redux like you normally would, with a single app state. The library simply enhances a history instance to allow it to synchronize any changes it receives into application state.

history + store (redux) → react-router-redux → enhanced history → react-router

朝代：明代

作者：唐寅

作者：白居易

朝代：唐代

题记：暂时的离别是为了再次重逢时的感动

离别