99 lines
1.7 KiB
Markdown
99 lines
1.7 KiB
Markdown
---
|
|
title: Redux
|
|
category: React
|
|
---
|
|
|
|
### Stores
|
|
|
|
```js
|
|
import { createStore } from 'redux';
|
|
|
|
function counter(state = 0, action) {
|
|
switch (action.type) {
|
|
case 'INCREMENT':
|
|
return state + 1;
|
|
case 'DECREMENT':
|
|
return state - 1;
|
|
default:
|
|
return state;
|
|
}
|
|
}
|
|
```
|
|
|
|
```js
|
|
let store = createStore(counter);
|
|
|
|
store.subscribe(() => { ... })
|
|
store.dispatch({ action })
|
|
store.getState()
|
|
store.dispatch({ type: 'INCREMENT' }); // 1
|
|
store.dispatch({ type: 'DECREMENT' }); // 10
|
|
```
|
|
|
|
### React Redux
|
|
|
|
```js
|
|
React.render(
|
|
<Provider store={store}>
|
|
<App />
|
|
</Provider>, mountNode)
|
|
```
|
|
|
|
```js
|
|
class App extends React.Component {
|
|
render () {
|
|
return
|
|
<div onClick={() => this.props.onMessageClick('hello')}>
|
|
{this.props.message}
|
|
</div>
|
|
}
|
|
}
|
|
|
|
function mapStateToProps (state) {
|
|
return { message: state.message }
|
|
}
|
|
|
|
function mapDispatchToProps (dispatch) {
|
|
return {
|
|
onMessageClick (message) {
|
|
dispatch({ type: 'click', message })
|
|
}
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(App);
|
|
```
|
|
|
|
## Middleware
|
|
|
|
```js
|
|
// noop middleware
|
|
const logger = store => dispatch => action { dispatch(action) }
|
|
|
|
const logger = store => {
|
|
// This function runs on createStore().
|
|
// It returns a decorator for dispatch().
|
|
|
|
return dispatch => {
|
|
// Runs on createStore(), too.
|
|
// It returns a new dispatch() function
|
|
|
|
return action => {
|
|
// Runs on every dispatch()
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### Applying middleware
|
|
|
|
```js
|
|
const store = createStore(reducer, {}, applyMiddleware(logger, thunk, ...))
|
|
```
|
|
|
|
## Reference
|
|
|
|
* [Redux](https://www.npmjs.com/package/redux)
|
|
* [React-redux](https://www.npmjs.com/package/react-redux)
|
|
* [Usage with React](http://rackt.github.io/redux/docs/basics/UsageWithReact.html)
|