react-redux

下载安装

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要简单好用些