redux与react联合使用

redux是用来状态管理的，react是view层框架，两者配合来创建一个复杂的单页应用。



1、index.redux.js负责redux部分

const ADD_GUN = '加机关枪';
const REMOVE_GUN = '减机关枪';

//建立reducer，根据state和action，返回一个新的state
export function counter(state = 0, action) {
switch(action.type) {
case ADD_GUN:
return state + 1;
case REMOVE_GUN:
return state - 1;
default:
return state;
}
}

// action creator
export function addGUN() {
return {type: ADD_GUN};
}

export function removeGUN() {
return {type: REMOVE_GUN};
}

2、App.js组件属于react

import React from 'react';
import {addGUN, removeGUN} from './index.redux';

class App extends React.Component {
render() {
const store = this.props.store;
const num = store.getState();
return(
<div>
<h1>现在有{num}把机枪</h1>
<button onClick={() => store.dispatch(addGUN())}> 申请武器 </button>
<button onClick={() => store.dispatch(removeGUN())}> 撤销武器 </button>
</div>
)
}
}

export default App;

3、index.js组合react和redux

import React from 'react';
import ReactDom from 'react-dom';
import {createStore} from 'redux';
import App from './App';
import {counter} from './index.redux';

const store = createStore(counter);

function render() {
ReactDom.render(<App store={store}/>, document.getElementById('root'));
}

render();

store.subscribe(render);