[TOC]
`npm i redux -s`或`yarn add redux`
~~~
在chrome商店中安裝redux
~~~
目錄結構
## 1.定義store管理哪些數據
```
import {createStore} from 'redux';
```
## 2.定義reducer放置數據
```
var defaultState={
inputValue:"hello world",
list:[]
}
export default (state=defaultState,action)=>{
if(action.type==="inputChange"){
var newState = {...state};
newState.inputValue = action.value;
return newState;
}
return state;
}
```
## 3.將reducer中的數據和store通信
```
import reducer from './reducer';
const store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;
```
## 4.在app.js中用使用store中的數據
```
import store from './store/index.js';
class App extends Component {
constructor(props){
super(props);
this.state = store.getState()
}
}
```
## 5.事件派發action給store
```
handleChange=(event)=>{
var action ={
type:"inputChange",
value:event.target.value
}
store.dispatch(action);
}
```
## 6.在reducer中改變state
```
var defaultState={
inputValue:"hello world",
list:[]
}
export default (state=defaultState,action)=>{
if(action.type==="inputChange"){
var newState = {...state};
newState.inputValue = action.value;
return newState;
}
return state;
}
```
## 7.組件訂閱store的改變
```
constructor(props){
super(props);
this.state = store.getState()
/* 只要store的狀態發生改變的時候就會觸發 */
store.subscribe(this.handleStoreChane)
}
handleStoreChane=()=>{
this.setState(store.getState())
}
}
```
