redux学习笔记

React-redux学习阶段

1.在src目录中新建store仓库,以及reducer(仓库管理员),存储默认state数据

• state中的数据为初始的默认数据,后面组件使用时候会使用mapStateToProp方法将其中的数据映射到组件中
• action为用于修改state中的数据,用mapDispatchToProps方法结合dispatch将action传入到管理员reducer中

>let defaultData={
    num:1
}
//管理员
const reducer=(state=defaultData,action)=>{
return state
}
export default reducer;

2.在store/index.js中使用reducer管理员

> import {createStore} from 'redux'
import reducer from './reducer'
const store =createStore(reducer)
//管理员被引入到仓库中,每次仓库都会触发管理远
export default store

3.在src/index.js中,引入仓库,并使用Provider包裹

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {Provider} from 'react-redux'
import store from './store'
ReactDOM.render(
  // <React.StrictMode>
  <Provider store={store}>
    <App />
    </Provider>
  // </React.StrictMode>,
  ,
  document.getElementById('root')
);

到这里,初步的仓库已经建立完毕,接下来将是数据的使用以及修改,完美的分割线
--------------------分割分割分割---------------------------------------------------------------------

引用数据

1.component/header.js

import React from 'react';
import {connect} from 'react-redux'
class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (<div>Header组件{this.props.num}</div>  );
    }
}
//用于映射仓库中的数据
let mapStateToProp=(state)=>{
    return ({
        num:state.num
    })
}
//将组件和映射的数据进行绑定
let superHeader=connect(mapStateToProp)(Header)
console.log(mapStateToProp);
 
export default superHeader;

2.数据的修改需要使用到mapDispatchToProps方法
/btn.js

const mapDispatchToProp = (dispatch) => ({
    addFnc() {
        const action = {
            type: 'add',
            value: 1
        }
        dispatch(action)
    }
})
const superBtn = connect(mapStateToProps, mapDispatchToProp)(Btn)

在触发addFnc方法之后,原reducer/index.js中的reducer方法会重新被触发

接着,在action中可以使用action.type的类型进行业务逻辑的操作用于修改state中的数据.
在进行数据修改之前,进行一遍数据的深拷贝----------

let defaultData={
    num:1
}
const reducer=(state=defaultData,action)=>{
    console.log(action);
    //数据操作部分
    if(action.type==='add'){
        let newState=JSON.parse(JSON.stringify(state))
        newState.num+=action.value
        return newState
    }
return state
}
export default reducer;

不愿秃头学习记skr!~~~