搭建一個(gè)React-redux-router + antd項(xiàng)目（一）初始化項(xiàng)目
搭建一個(gè)React-redux-router + antd項(xiàng)目（二）安裝 redux、router逐工、axios和antd
搭建一個(gè)React-redux-router + antd項(xiàng)目（三）使用路由
一般項(xiàng)目模塊較多娘锁，建議獨(dú)立管理維護(hù)洞难。實(shí)例：在login文件目錄下創(chuàng)建reducer.js
// login/reducer.js
export default function login(
state = {
loading: false,
},
action
) {
switch (action.type) {
default:
return state;
}
}
在src下創(chuàng)建一個(gè)reducers.js 用來整合管理每個(gè)模塊創(chuàng)建的reducer
// src/reducers.js
// 引入 combineReducers 用來整合所有的reducer
import {combineReducers} from "redux";
// 引入 剛剛創(chuàng)建的 login reducer
import login from "./main/login/reducer";
let Reducers = combineReducers({
login,
});
export default Reducers;
打開src/index.js 引入reducers逞姿、中間件扫步，并給組件綁定唯一的store
// src/index.js
+ import Reducers from "./reducers";
// createStore 構(gòu)造 項(xiàng)目唯一的store, applyMiddleware用來拓展thunk 中間件
+ import { createStore, applyMiddleware } from "redux";
// 中間件妻顶，用來處理異步請(qǐng)求獲得的數(shù)據(jù)
+ import thunk from "redux-thunk";
// Provider 用于結(jié)合react和redux;
+ import { Provider } from "react-redux";
+ const store = createStore(Reducers, applyMiddleware(thunk))
ReactDOM.render(
+ <Provider store={store}>
<HashRouter>
<App />
</HashRouter>
+ </Provider>,
document.getElementById('root'));
serviceWorker.unregister();
redux初始化已完成酸员，在組件中綁定state就可以使用this.props訪問reducer中的狀態(tài)了
在 login/login.js 中修改添加：
// login/login.js
// 引入"react-redux"兩個(gè)API中的高階函數(shù) connect（另一個(gè)是 Provider），用來將state綁定到Connect組件的參數(shù)上
+import { connect } from "react-redux";
- export default class Login extends Component {
+ class Login extends Component {
render() {
+ console.log(this.props.loading)
return(
<div>登錄</div>
)
}
}
+ export default connect(state => state.login)(Login);
在控制臺(tái)就可以打印出 false
下一篇：使用action更新store
搭建一個(gè)React-redux-router + antd項(xiàng)目（五）用action更新store
搭建一個(gè)React-redux-router + antd項(xiàng)目（六）用 redux-persist 實(shí)現(xiàn)數(shù)據(jù)持久化
