1、先看看最終效果，因為趕時間，所有就沒有調整樣式（紅色框內是頁面初始化預設顯示的內容，藍色框內是新增的第一條內容）

2、專案檔案的目錄結構（main.js是路由檔案，最終渲染；其餘就是常規的redux應用檔案；本來還有一個contants資料夾，用來儲存定義的常量js，由於這裡常量很少，所以就忽略了）

3、先看元件more.js（這裡主要作用是定義元件虛擬DOM，繫結使用者action、獲取store的值）程式碼如下：

var React = require('react');
var store=require('../store/moreStore');
var addTodoActions=require
 
('../actions/moreAction');
module.exports= React.createClass({
    getInitialState: function(){
        return {
            items: store.getState()
        };
},
componentDidMount: function(){
       store.subscribe(this.onChange);
},
onChange: function(){
        this.setState({
            items: store.getState()
        });
 
},
handleAdd: function(){
        let value = document.getElementById('tit').value;
let cont = document.getElementById('tcont').value;
if(value !=null && value !="" && cont !=null && cont !=""){
            store.dispatch(addTodoActions(value,cont));
}
    },
render: function
 
(){
        return (
            <div>
                <div style={{marginLeft:'200px'}}>
                    <input id="tit" type="text" placeholder="標題" /><br/>
                    <textarea id="tcont" placeholder="內容"></textarea><br/>
                    <button onClick={this.handleAdd} className="btn btn-success">點選新增</button>
                    <ul>
                        {this.state.items.map(function(item){
                            return <li><h3>{item.text}</h3><p>{item.content}</p></li>;
})}
                    </ul>
                </div>
            </div>
        )
    }
});

4、moreAction.js主要是返回方法型別、客戶端文字框新新增的值，程式碼如下：

let addTodoActions = function(text,content){
    return {
        type: 'add_todo',
text: text,
content:content
    };
};
module.exports=addTodoActions;

5、moreReducer.js主要用於接收action發過來的客戶端的值，改變預設state，返回新的state，程式碼如下：

let moreReducers= function(state, action){

    if(typeof state === 'undefined'){
        return [{
            text:"這是初始化預設標題",
content:"這是初始化預設內容",
completed: false
}];
}
    switch(action.type){
        case 'add_todo':
            return state.concat({
                text: action.text,
content: action.content,
completed: false
});
break;
default:
            return state;
}
};
module.exports=moreReducers;

6、moreStore.js主要用於將reducer和store繫結起來，程式碼如下

var Redux=require( 'redux');
var moreReducer=require('../reducers/moreReducer');
//預設輸出
var store = Redux.createStore(moreReducer);
module.exports = store;

7、main.js主要就是呼叫more.js、並且渲染到頁面上（就很簡單啦，就不貼程式碼了）