一篇文章带你了解使用redux&react-redux

   讲解版本
    	"redux": "^4.2.0",
    	 "react-redux": "^8.0.5",

配置

• mian.js

import RouterApp from "./router/index.js"; // 路由
import store from "./store";
import { Provider } from "react-redux";
export default function App() {
  return (
  	// 使用此方法注入store,在包裹的组件内都可以通过获得props获得它
    <Provider store={store}>
      <RouterApp />
    </Provider>
  );
}

• 文件： store>index.js

import { reducer } from "../reducer";
import { createStore } from "redux";
export default createStore(reducer);

• 文件： reducer>index.js

// 初始化仓库内容
const initStore = {
  phone: "admin",
  pass: "123",
};
exports.reducer = (store = initStore, action) => {
  switch (action.type) {
    case "addUser":
      return {
        phone: (store.name = action.value.username),
        pass: (store.name = action.value.password),
      };
    default:
      return store;
  }
};

• 使用（获取）

import { connect } from "react-redux";
function Login(props) {
  console.log(props); // { phone: "admin", pass: "123"}
}
// 获取state
const getStore = (state) => {
  return state;
};
export default connect(getStore)(Login);

• 使用（设置）

import { connect } from "react-redux";
function Register(props) {
  props.addUser(values);
}
// 重新设置store
const setStore = (dispacth) => {
  return {
    addUser: (value) => {
      dispacth({
        type: "addUser",
        value,
      });
    },
  };
};
export default connect(null, setStore)(Register);

描述过程

1. 下载redux以及react-redux
2. 新建reducer文件，配置操作仓库方法以及仓库初始化
3. 新建store文件，引入createStore，连接reducer
4. 可在mian.js中通过react-redux中的 Provider 传递 store
5. 使用通过connect 配置连接 =>形式：connect(得到store的方法, 设置store的方法)(UI)