react-redux
React插件枢冤，作用：方便在React項(xiàng)目中使用Redux
react-thunk
中間件，作用：支持異步action
一铜秆、安裝插件
npm install --save react-redux
npm install --save redux-thunk
二淹真、新建文件
新建store目錄
新建文件
state.js（存放數(shù)據(jù)）
export default {
pageTitle: '首頁(yè)',
infoList: []
}
reducer.js (它就是將來(lái)真正要用到的數(shù)據(jù)，我們將其統(tǒng)一放置在reducers.js文件)
// 工具函數(shù)连茧，用于組織多個(gè)reducer核蘸，并返回reducer集合
import { combineReducers } from 'redux'
// 默認(rèn)值
import defaultState from './state.js'
// 一個(gè)reducer就是一個(gè)函數(shù)
function pageTitle (state = defaultState.pageTitle, action) {
// 不同的action有不同的處理邏輯
switch (action.type) {
case 'SET_PAGE_TITLE':
return action.data
default:
return state
}
}
function infoList (state = defaultState.infoList, action) {
switch (action.type) {
case 'SET_INFO_LIST':
return action.data
default:
return state
}
}
// 導(dǎo)出所有reducer
export default combineReducers({
pageTitle,
infoList
})
action.js(現(xiàn)在我們已經(jīng)創(chuàng)建了reducer，但是還沒(méi)有對(duì)應(yīng)的action來(lái)操作它們啸驯，所以接下來(lái)就來(lái)編寫action)
export function setPageTitle(data) {
return (dispatch, getState) => {
dispatch({ type: "SET_PAGE_TITLE", data: data });
};
}
export function setInfoList(data) {
return (dispatch, getState) => {
dispatch({ type: "SET_INFO_LIST", data: data });
};
}
index.js
import { createStore , applyMiddleware} from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk';
const store = createStore(
reducer,
applyMiddleware(thunk)<Provider store={store}>
<App />
</Provider>
);
export default store;
三客扎、使用
index.js
import store from "./store/index";
import { Provider } from "react-redux";
<Provider store={store}>
<App />
</Provider>
組件
// Test.jsx
import React, { Component } from "react";
// connect方法的作用：將額外的props傳遞給組件，并返回新的組件坯汤，組件在該過(guò)程中不會(huì)受到影響
import { connect } from "react-redux";
// 引入action
import { setPageTitle, setInfoList } from "../store/action";
class redux extends Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
let { setPageTitle, setInfoList } = this.props;
// 觸發(fā)setPageTitle action
setPageTitle("新的標(biāo)題");
// 觸發(fā)setInfoList action
setInfoList("6666");
}
render() {
// 從props中解構(gòu)store
let { pageTitle, infoList } = this.props;
console.log(pageTitle);
// 使用store
return (
<div>
<h1>{pageTitle}</h1>
<h1>{infoList}</h1>
{/* {infoList.length > 0 ? (
<ul>
{infoList.map((item, index) => {
<li>{item.data}</li>;
})}
</ul>
) : null} */}
</div>
);
}
}
// mapStateToProps：將state映射到組件的props中
const mapStateToProps = (state) => {
return {
pageTitle: state.pageTitle,
infoList: state.infoList,
};
};
// mapDispatchToProps：將dispatch映射到組件的props中
const mapDispatchToProps = (dispatch, ownProps) => {
return {
setPageTitle(data) {
// 如果不懂這里的邏輯可查看前面對(duì)redux-thunk的介紹
dispatch(setPageTitle(data));
// 執(zhí)行setPageTitle會(huì)返回一個(gè)函數(shù)
// 這正是redux-thunk的所用之處:異步action
// 上行代碼相當(dāng)于
/*dispatch((dispatch, getState) => {
dispatch({ type: 'SET_PAGE_TITLE', data: data })
)*/
},
setInfoList(data) {
dispatch(setInfoList(data));
},
};
};
export default connect(mapStateToProps, mapDispatchToProps)(redux);
