下載安裝
npm install react-redux redux --save
概念：
Provider組件：自動的將store的state和組件進行關(guān)聯(lián)
mapState:這個函數(shù)用于將store的state映射到組件的props
mapActions:將store中的dispatch映射到props里，實現(xiàn)了數(shù)據(jù)的共享
connect方法：將組件和數(shù)據(jù)（方法）進行連接
項目目錄下src/redux/store
import {createStore} from 'redux';
// 初始化數(shù)據(jù)
const intialState={
num:1
}
let actions={
add:(state,action)=>{
state.num++;
return state
},
decrement:(state,action)=>{
state.num--;
return state
}
}
// 通過動作，創(chuàng)建新的state
const reducer=(state={ //state的默認值
...intialState
},action)=>{ //通過調(diào)用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里面定義修改數(shù)據(jù)的動作會更加直觀明了
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'})}
// }
}
// 創(chuàng)建倉庫
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里的內(nèi)容就被整合到了props里
return (
<div>
<p>{props.num}</p>
<button onClick={()=>{props.add()}}>加</button>
</div>
);
}
//connect方法：將組件和數(shù)據(jù)（方法）進行連接
export default connect(mapState,mapActions)(App);
個人覺得redux比react-redux要簡單好用些
