在create-react-app脚手架中：【Redux和React结合使用】

在上文《 在create-react-app脚手架中：【单独使用Redux】》中，我们只在./index.js 文件中，就完成了store工作原理的测试。
那么React和Redux如何结合使用呢，还是在上文环境下开始

在./src/ 文件夹下新建三个文件 index.js index.redux.js app.js

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux'; 

import { counter, addGun, removeGun} from './index.redux';
import App from './app';

//store
const store = createStore(counter);

//get inititalState
const init = store.getState();
console.log(init);

//store.subscribe所需的参数为
store.subscribe(render);
function render() {
    ReactDOM.render(
        <App store={store} addGun={addGun} removeGun={removeGun}/>,
        document.getElementById('root')
    );
}
render();

//每次调用store.dispatch就会触发store.subcribe, 通常store.dispatch放在最后
store.dispatch(addGun());
store.dispatch(addGun());
store.dispatch(removeGun());

Redux相关的内容用 index.redux.js 单独管理

//index.redux.js
const addGUN = 'addGUN';
const removeGUN = 'removeGUN';

//reducer
export function counter(state=10, action) {
    switch(action.type) {
        case addGUN: 
        return state+1;
        case removeGUN: 
        return state-1;
        default :
        return state
    }
}

//action创建函数
export function addGun() {
    return { type: addGUN }
}
export function removeGun() {
    return { type: removeGUN }
}

//这个文件仅仅存放了 reducer 和 action创建函数

//app.js
import React from 'react';


class App extends React.Component {
    // constructor(props) {
    //     super(props);
    // }
    render() {
        let store = this.props.store;
        let addGun = this.props.addGun; 
        let removeGun = this.props.removeGun; 
        let num = store.getState()  
        return (
            <div>
                <h1>
                    现在有机枪 { num } 把
                </h1>
                <button onClick={()=>store.dispatch(addGun())}> 申请武器</button>&nbsp;
                <button onClick={()=>store.dispatch(removeGun())}> 上交武器</button>
            </div>/*onClick后面的值必须是纯函数的形式，而不能是一段可执行代码*/
        )
    }
}
export default App;