下载安装
npm install react-redux redux --save
概念：
Provider组件：自动的将store的state和组件进行关联
mapState:这个函数用于将store的state映射到组件的props
mapActions:将store中的dispatch映射到props里，实现了数据的共享
connect方法：将组件和数据（方法）进行连接
项目目录下src/redux/store
import {createStore} from 'redux';
// 初始化数据
const intialState={
num:1
}
let actions={
add:(state,action)=>{
state.num++;
return state
},
decrement:(state,action)=>{
state.num--;
return state
}
}
// 通过动作，创建新的state
const reducer=(state={ //state的默认值
...intialState
},action)=>{ //通过调用store.dispatch({type:'add'})，可使state.num自增
console.log(action)
// switch (action.type){
// case 'add':
// state.num++;
// break;
// case 'decrement':
// state.num--;
// break;
// default:
// break;
// }
// 这里是简化switch的写法，在上面的actions里面定义修改数据的动作会更加直观明了
let type=action.type
let keys=Object.keys(actions);
if(keys.indexOf(type)>=0){
state=actions[type](state,action)
}
// 返回一个新的对象（修改过后的）
return {...state}; //旧版本
// return state //新版本
}
// 将mapState和mapActions映射到组件的props上面
export const mapState=(state)=>{
return {
...state
}
}
export const mapActions=(dispatch)=>{
let keys=Object.keys(actions);
console.log(keys)
let obj={}
for(let index=0;index<keys.length;index++){
obj[keys[index]]=()=>{dispatch({type:keys[index]})}
}
return obj
// 上面的方法是用于简化下面的方法，不用每次写一个action，就往return的对象里添加一个方法去dispatch动作
// return{
// add:()=>{dispatch({type:'add'})}
// }
}
// 创建仓库
export const store=createStore(reducer)
项目目录下src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {Provider} from 'react-redux';
import {store} from './redux/store'
ReactDOM.render(
<Provider store={store}>
<React.StrictMode>
<App />
</React.StrictMode>
</Provider>,
document.getElementById('root')
);
reportWebVitals();
页面(组件)使用
import React from 'react';
// import store from '../Redux'
import {mapActions,mapState} from '../Redux/reactRedux';
import {connect} from 'react-redux'
const App = (props) => {
//intialState和actions里的内容就被整合到了props里
return (
<div>
<p>{props.num}</p>
<button onClick={()=>{props.add()}}>加</button>
</div>
);
}
//connect方法：将组件和数据（方法）进行连接
export default connect(mapState,mapActions)(App);
个人觉得redux比react-redux要简单好用些
