在上文《 在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;