1 分钟带你入门 Redux、React-Redux

import {createStore} from redux

function reducer(state,action) {
	... 修改state的地方
}

const store = createStore(reducer) // 第一步 创建数据仓库store,并定义好reducer

store.subscribe(() => { // 第二步 声明监听函数,当state发生变化的时候会触发
	... 
})

store.dispatch({type: xxx}) // 第三部 派发一个action触发reducer中对应的方法




import React from "react";
import { useState, useEffect } from "react";
import { createStore } from "redux";

function counter(count = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return count + 1;
    case "DECREMENT":
      return count - 1;
    default:
      return count;
  }
}
const store = createStore(counter);

export default () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    store.subscribe(() => {
      setCount(store.getState());
    });
  }, []);
  return (
    <div>
      <p>{count}</p>
      <div>
        <button onClick={() => store.dispatch({ type: "DECREMENT" })}>-</button>
        <button onClick={() => store.dispatch({ type: "INCREMENT" })}>+</button>
      </div>
    </div>
  );
};


import React from "react";
import { useState, useEffect } from "react";
import { createStore } from "redux";
import {Provider,connect} from 'react-redux'
function counter(count = 0, action) {
 ... 这里同上略过
}
const store = createStore(counter);
export default () => {
	return (
  	<Provider store={store}> // 这里跟context的使用是不是很像呀? 一个统一的数据提供方
    	<div>
      	<Title />
        <ButtonGroup />
      </div>
    </Provider>
  )
}
/** React-Reudx 提供了connect连接器(高阶函数)可以吧state和dispatch挂载到props上去 **/
// 向props挂载state
const mapStateToProps = state => {
	return {count: state}
}
const Title = connect(mapStateToProps)((props) => {
	return <p>{props.count}</p>
})
// 向props挂载dispatch
const mapDispatchToProps = dispatch => {
	return {
  	increment: () => dispatch({ type: "INCREMENT" }),
    decrement: () => dispatch({ type: "DECREMENT" })
  }
}
const ButtonGroup = connect(null, mapDispatchToProps)((props) => {
	return <div>
  	 <button onClick={() => props.increment()}>-</button>
     <button onClick={() => props.increment()}>+</button>
  </div>
})