react-redux
React插件，作用：方便在React项目中使用Redux
react-thunk
中间件，作用：支持异步action
一、安装插件
npm install --save react-redux
npm install --save redux-thunk
二、新建文件
新建store目录
新建文件
state.js（存放数据）
export default {
pageTitle: '首页',
infoList: []
}
reducer.js (它就是将来真正要用到的数据，我们将其统一放置在reducers.js文件)
// 工具函数，用于组织多个reducer，并返回reducer集合
import { combineReducers } from 'redux'
// 默认值
import defaultState from './state.js'
// 一个reducer就是一个函数
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
}
}
// 导出所有reducer
export default combineReducers({
pageTitle,
infoList
})
action.js(现在我们已经创建了reducer，但是还没有对应的action来操作它们，所以接下来就来编写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传递给组件，并返回新的组件，组件在该过程中不会受到影响
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;
// 触发setPageTitle action
setPageTitle("新的标题");
// 触发setInfoList action
setInfoList("6666");
}
render() {
// 从props中解构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) {
// 如果不懂这里的逻辑可查看前面对redux-thunk的介绍
dispatch(setPageTitle(data));
// 执行setPageTitle会返回一个函数
// 这正是redux-thunk的所用之处:异步action
// 上行代码相当于
/*dispatch((dispatch, getState) => {
dispatch({ type: 'SET_PAGE_TITLE', data: data })
)*/
},
setInfoList(data) {
dispatch(setInfoList(data));
},
};
};
export default connect(mapStateToProps, mapDispatchToProps)(redux);
