首先我們會用到哪些框架和工具呢？
ui框架
狀態管理工具，與react沒有任何關係，其他ui框架也可以使用redux
react外掛程式，作用：方便在react專案中使用redux
中介軟體，作用：支援非同步action
tips：與redux無關的目錄已省略
|--src
|-- store redux目錄
|-- actions.js
|-- index.js
|-- reducers.js
|-- state.js
|-- components 元件目錄
|-- test.jsx
|-- index.js 專案入口
/**
* 步驟一
* state.js
* 設定預設值
* yarn add redux
* yarn add react-redux
* yarn add redux-thunk
*/// 宣告預設值
// 這裡我們列舉兩個示例
// 同步資料：pagetitle
// 非同步資料：infolist（將來用非同步介面獲取）
export default
/**
* 步驟二
* reducers.js
* 建立 reducer
*/// 工具函式,用於組織多個reducer,並返回reducer集合
import from 'redux';
// 預設值
import defaultstate from './state.js';
// 乙個reducer就是乙個函式
function pagetitle (state = defaultstate.pagetitle, action)
}function infolist (state = defaultstate.infolist, action)
}// 匯出所有reducer
export default combinereducers()
/**
* 步驟三
* actions.js
* 建立action
*/// action也是函式
export function setpagetitle (data) );
}}export function setinfolist (data)
}).then(res => ).then(data => = data
if(code === 0))}})
}}
/**
* 步驟四
* index.js
* 建立store例項
*/// createstore: 用於建立store例項
/** * 中介軟體
* 作用:如果不使用該中介軟體,當我們dispatch乙個action時,需要給dispatch函式傳入action物件；
* 但如果我們使用了這個中介軟體,那麼就可以傳入乙個函式,這個函式接收兩個引數:dispatch和getstate。
* 這個dispatch可以在將來的非同步請求完成後使用,對於非同步action很有用
*/import thunk from 'redux-thunk';
// 引入reducer
import reducers from './reducers.js';
// 建立store例項
let store = createstore(
reducers,
)export default store
首先，我們來編寫應用的入口檔案index.js
/**
* 入口檔案
* index.js
*/import react from 'react';
import reactdom from 'react-dom';
// 引入元件
import testcomponent from './components/test.jsx';
/** * provider是react-redux兩個核心工具之一
* 作用: 將store傳遞到每個專案中的元件中
*/// 第二個工具是connect
import from 'react-redux';
// 引入建立好的store例項
import store from './store/index.js';
// 渲染dom
reactdom.render(
(
),document.getelementbyid('root')
);
/**
* 測試頁面
* test.jsx
*/import react, from 'react';
// connect方法的作用:將額外的props傳遞給元件,並返回新的元件,元件在該過程中不會受到影響
import from 'react-redux';
// 引入action
import from '../store/actions.js';
class test extends component ;
} // 生命週期--元件載入完畢
componentdidmount () = this.props;
// 觸發setpagetitle action
setpagetitle('新的標題');
// 觸發setinfolist action
setinfolist();
} render() = this.props;
// 使用 store
return (
);}}
// mapstatetoprops:將state對映到元件的props中
const mapstatetoprops = (state) =>
}// mapdispatchtoprops:將dispatch對映到元件的props中
優雅的在React專案中使用Redux
首先我們會用到哪些框架和工具呢？reactui框架redux狀態管理工具，與react沒有任何關係，其他ui框架也可以使用reduxreact reduxreact外掛程式，作用 方便在react專案中使用reduxreact thunk中介軟體，作用 支援非同步action src store r...
優雅的在React專案中使用Redux
或許你當前的專案還沒有到應用redux的程度，但提前了解一下也沒有壞處首先我們會用到哪些框架和工具呢？react ui框架 redux 狀態管理工具，與react沒有任何關係，其他ui框架也可以使用redux react redux react外掛程式，作用 方便在react專案中使用redux r...
如何優雅地在React專案中使用Redux
首先我們會用到哪些框架和工具呢？ui框架 狀態管理工具，與react沒有任何關係，其他ui框架也可以使用redux react外掛程式，作用 方便在react專案中使用redux 中介軟體，作用 支援非同步action tips 與redux無關的目錄已省略 src store redux目錄 ac...