react 初学者（第二章）

目录结构

reducer.js 的使用

reducer.js

// 定义一个默认状态

const defaultState ={
    
    
    msg: '你好世界'
}

// 导出一个函数
// eslint-disable-next-line
export default (state=defaultState, action) =>{
    
    
    let newState = JSON.parse(JSON.stringify(state))
    switch(action.type){
    
    
        case "changeMsgFn":
            newState.msg = action.value;
            break;
        default:
            break;
    }
    return newState
}

index.js

import reducer from './reducer';
import {
    
     createStore } from 'redux';

// createStore 创建仓库

const store = createStore(reducer)
export default store

App.jsx

import React from 'react'
import {
    
    connect} from 'react-redux'
function App(props){
    
    
    return (
        <>
            <h2>{
    
    props.msg}</h2>
            <button onClick={
    
    props.changeMsg}>修改msg</button>
        </>
    )
}
const mapStateToProps = (state)=>{
    
    
    return {
    
    
        msg: state.msg
    }
}
const mapDispatchToProps = (dispatch) => {
    
    
    return {
    
    
        changeMsg(){
    
    
            const action = {
    
    type: 'changeMsgFn', value: 'hello world'}
            dispatch(action)
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(App)