react-redux（函数组件——精简版）

修改前：

 点击添加后：

 点击切换颜色后：

一、 在入口文件index.js中用Provider标签包裹

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from "./App"
import reportWebVitals from './reportWebVitals';
import store from './redux/store';
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store} >
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>
);

二、 在App.js文件中正常引入文件

import './App.css';
import Index from './page/Index';

function App() {
  return (
    <div className="App">
      <Index></Index>
    </div>
  );
}

export default App;

三、 创建文件夹redux，文件分别是store.js和reducer.js

store.js如下：

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


const store = createStore(colorReducer)

export default store

reducer.js如下：

const init = { color: 'red', todo: [{ 'name': '张哥' }] }
export default function colorReducer(preState = init, action) {
    const { type, data } = action
    switch (type) {
        //切换颜色
        case 'sui':
            // preState.color = data
            return {color:data,todo:[...preState.todo]}
        //添加
        case 'todo':
            return {color:preState.color,todo:[...preState.todo,data]}
        default:
            return preState;
    }
}

四、 渲染的组件 (page/Index.js)

import React from 'react'
import { connect } from 'react-redux'

function Index(props) {
  return (
    <div style={{ background: props.color, width: '200px', height: '200px' }}>
      {
        props.todo.map((item, index) => {
          return (
            <div key={index}>{item.name}</div>
          )
        })
      }
      <button onClick={props.todo1}>添加</button>
      <button onClick={props.todo2}>变蓝</button>
    </div>
  )
}

// mapStateToProps
const MSTP = (state) => {
  console.log(state, 'state');
  return {
    ...state
  }
}

// mapDispatchToProps
const MDTP = (dispatch) => {
  let obj = { 'name': '大哥' }
    //随机生成颜色
    function createColor() {
      let str = '0123456789abcdef'
      let colors = '#'
      for (let i = 0; i < 6; i++) {
        colors += str[Math.floor(Math.random() * 16)]
      }
      return colors
    }
  return {
    // 添加
    todo1: () => dispatch({ type: 'todo', data: obj }),
    // 换背景颜色
    todo2: () => dispatch({ type: 'sui', data: createColor() }),
  }
}

const Con = connect(MSTP, MDTP)(Index)

export default Con