初體驗react+redux+react-redux的基本使用方法
看的似懂非懂，自己動手寫個demo來的檢驗一下：
這裡關於原理講解，請參照阮老師的教程。我直接上程式碼和思路：
1.使用github上的create-react-app官方腳手架，根據demo的需要，調整目錄如下：
2.實現的demo很簡單，效果圖如下：就是講input輸入的內容通過提交按鈕新增到顯示框裡。
整個流程遵循：使用者操作View---->View通過dispatch將action通知給釋出出去---->Reducer接受當前狀態的State和action傳過來的資料，並進行處理返回一個新的State;
demo的資料流動： 點選Button將Input的輸入值新增到一個數組中傳給Display進行遍歷顯示；
首先：Input的輸入會改變檢視即需要通過dispatch將這個訊息派發出去，即action、reducers就必不可少了。
action部分：
export const getInputContent = (inputContent) => ({ type: INPUTCONTENT,inputContent })reducers部分：
function getInputContent(state = '', action) { switch (action.type) { case INPUTCONTENT: return action.inputContent defaultInput部分：
onChange={(e) => dispatch(getInputContent(e.target.value))}至此reducer返回一個新的state；
Button元件需要獲取最新的Input的內容，即最新state
function getInputText(state) { const { getInputContent, getAllContent } = state.reducers_demo1; console.log(getInputContent); return { allContent: getAllContent獲取這個state需要藉助React-Redux 提供connect方法，用於從 UI 元件生成容器元件。connect的意思，就是將這兩種元件連起來。
getInputText是一個函式。建立一個從（外部的）state物件到（UI 元件的）props物件的對映關係。
getInputText會訂閱 Store，每當state更新的時候，就會自動執行，重新計算 UI 元件的引數，從而觸發 UI 元件的重新渲染。
connect方法可以省略getInputText引數，那樣的話，UI 元件就不會訂閱Store，就是說 Store 的更新不會引起 UI 元件的更新。
所以我們從getInputText就可以獲取當前的state從而獲取Input元件的輸入內容。
Button發表按鈕點選時需要將Input的內容push到AllContent這樣一個數組裡，返回一個新的state；
action部分：
export const getAllContent = (allContent) => ({ type: AllCONTENT, allContent })reducers部分：注意：因為每次都是返回一個新的state；因為是引用型別的所以需要生成一個新的陣列，否則檢視不更新（踩坑）
function getAllContent(state = [], action) { switch (action.type) { case AllCONTENT: return action.allContent.concat() //易錯點 default: return state }}Button部分：
onClick = () => { let { inputContent, dispatch, allContent } = this.props; if (inputContent === "") { return; } allContent.push(inputContent); dispatch(getAllContent(allContent)); }返回新的state，最後當然是需要顯示到Display這個元件上。
同理利用connect關聯來獲取最新狀態：
Display部分：
function getAll(state) { let { getAllContent } = state.reducers_demo1; return { getAllContent }}export default connect(getAll)(Display);獲取allContent遍歷出來顯示到頁面，完美。
reducer中用到了：
import { combineReducers } from 'redux'const demo1Reducer = combineReducers({ getInputContent, getAllContent, initValue})export default demo1Reducer;因為專案中最終有一個總的reducer;
關於建立store和將reducer注入到createStore中，入口檔案index.js如下：
import React from 'react'import ReactDOM from 'react-dom'import { Provider } from 'react-redux'import { createStore } from 'redux'import reducers from './redux/rootReducer'import registerServiceWorker from './registerServiceWorker'import Demo1 from './demo_01/main'const store = createStore(reducers)
ReactDOM.render( <Provider store={store}> <Demo1 /> </Provider>, document.getElementById('root'))registerServiceWorker();
其實文中記錄的只是使用的方法思路，這個redux一開始接觸的時候，感覺資料傳輸很混亂，不知從哪到哪。解釋起來也比較繞口，理解就更有困難（可能是我個人理解能力問題）。看一遍阮老師的教程，直接上demo開幹，具體詳細的使用，需要結合demo原始碼和執行效果，這樣才能更深層次的理解並懂得如何使用。
看不如做，邊看邊做，來的深刻。
也不知道該篇文章表述清楚沒，此文只是個人的一些淺薄的理解，關於深層次的理解還得繼續努力。