本文共 4125 字，大约阅读时间需要 13 分钟。

Redux ������������������

Redux ������������

Redux ������������������������������������������������������������ React ������������������������������������������������������ Store���Reducer ��� Action���

Redux ������������

Redux Store ������

������������

// store.js
import { createStore } from 'redux';
 
const CounterReducer = (state = 0, action) => {
    switch(action.type) {
        case 'ADD': return state + 1;
        case 'MINUS': return state - 1;
        default: return state;
    }
};
 
const store = createStore(CounterReducer);
 
export default store;

// App.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
 
class App extends Component {
    render() {
        const { num, dispatch } = this.props;
        return (
            
   
                
    
���������������������{num}
                
     dispatch({ type: 'ADD' })}>+1
                
     dispatch({ type: 'MINUS' })}>-1
            
   
        );
    }
}
 
export default connect()(App);

React-Redux ������

React-Redux ��������� Provider ��� connect ���������������������

Provider ������

Provider ��������������� Redux Store ������������������������������ index.js ���������������������������������

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
 
ReactDOM.render(
    
   
        
    
    
   
    , document.getElementById('root'));

connect ������

connect ��������������� Redux Store ��� State ��� Action ������������ React ������������������������������

import { connect } from 'react-redux';
 
function MyComponent(props) {
    return 
���������������������{props.num}
;
}
 
export default connect()(MyComponent);

Redux ������������

��� Redux ��������������������������������������� Redux Thunk ���������������������������������������������

// store.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
 
const CounterReducer = (state = 0, action) => {
    switch(action.type) {
        case 'ADD': return state + 1;
        case 'MINUS': return state - 1;
        default: return state;
    }
};
 
const store = createStore(CounterReducer, applyMiddleware(thunk));
 
export default store;

// App.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
 
class App extends Component {
    render() {
        const { num, dispatch } = this.props;
        return (
            
   
                
    
���������������������{num}
                
     dispatch({ type: 'ADD' })}
                >
                    +1
                
                
     dispatch({ type: 'MINUS' })}
                >
                    -1
                
                
     {
                        setTimeout(() => {
                            dispatch({ type: 'ADD' });
                        }, 1000);
                    }}
                >
                    ASYNC ������
                
            
   
        );
    }
}
 
export default connect()(App);

Redux ������������

��������������������� Redux ��������������������� Redux DevTools ������������������������������������������������������ store.js ������

import { compose, createStore, applyMiddleware } from 'redux';
import { devTools, generateReduxDevTools } from 'redux-devtools-extension';
 
const store = createStore(
    CounterReducer,
    compose(
        applyMiddleware(thunk),
        ...generateReduxDevTools()
    )
);
 
export default store;

��������������������������������������������������� Redux DevTools ��������������������� Redux ������������������