使用create-react-app生成一个react项目然后再安装redux和react-redux
npm install redux --save
npm install react-redux --save
在src目录最外层的index.js文件中引入redux，store，provider
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from "./store/reducer"
import ReactDOM from 'react-dom';
import './index.css';
import Demo from './demo/myPage'
let store = createStore(reducer);
ReactDOM.render(
<Provider store={store}>
<Demo />
</Provider>
,
document.getElementById('root')
);
Provider:作为提供者把store的内容放在全局，任何一个子页面都可以访问store里面的方法和定义的变量
在src下面新建一个store文件夹目录如下：
image.png
actions:文件主要是一系列方法，例：
import * as actions from './actionTypes';
export function addList(payload){
return {
type:actions.UPDATE_LIST,
payload
}
}
定义的type统一放在actionType文件中，便于管理
export const UPDATE_INPUT = "updateInput";
export const UPDATE_LIST = "updatelist";
export const DELETE_ITEM = "deleteItem";
state的初始值单独放在initialValue文件中,定义初始值的时候可以使用immutable中的Record，这样就不需要深拷贝state然后再赋值给state里面得变量,npm install immutable --save,安装immutable；
import {Record} from 'immutable';
export default Record(
{
list:[],
inputValue:"hello Redux"
}
)
Record的特性（从别人的博客上复制过来的）
Record跟Immuable的Map很像，但是它有以下独特的特点，使它具有特殊性：
1.一旦构造好，就不能添加更多的属性（key）。
2.可以给Recor的实例定义默认值。
3.Record实例的属性可以像普通JS对象那样访问，也可以将它删除。
4.可以对Record进行命名，以便更好地进行debug和错误处理。
5.可以对Record进行扩展（extend），以从Record中提供派生数据。
在src下面的demo文件夹中myPage文件实践使用，这里需要用connect将当前页面的内容和state的方法变量进行一个连接之后才可以使用
//引入需要用到的方法和变量
import { connect } from 'react-redux';
import * as funcs from '../store/actions'
关于bindActionCreators，详情请见https://redux.js.org/api/bindactioncreators
import { bindActionCreators } from 'redux';
import { Map } from 'immutable';
//中间代码省略
export default connect()(MyPage)
const allAction = [funcs];
此时只是用connect连接了UI组件，如果需要有交互和展示state变量的值，还需要再定义两个方法：
connect方法接受两个参数：mapStateToProps和mapDispatchToProps。前者负责输入逻辑，将state映射到 UI 组件的props中，后者负责逻辑的处理，即将用户对 UI 组件的操作映射成 Action。
//将变量映射到组件的props中
function mapStateToProps(state){
return {
inputValue : state.inputValue,
list:state.list
}
}
//将方法映射到props中
function mapToDispatch(dispatch){
const creators = Map().merge(...allAction).
filter(value=>typeof value === 'function').
toObject();
return {
actions:bindActionCreators(creators,dispatch),
dispatch
}
}
//直接获取（该段代码应该在render中定义）
const { list,inputValue,action:{ handleChange } } = this.props;
这样就可以在组件中访问变量list和inputValue，可以通过dispatch对inputValue和list进行增删改的操作;
我把代码上传到github上：https://github.com/zihan520/reduxDemo/tree/master/reduxDemo
感兴趣的小伙伴可以看一看。
（本文只是个人对react-redux的理解，如果有不正确的地方可以帮忙指出来，谢谢！）
网友评论