react学习-redux快速体验

1.redux是用于和react搭配使用的状态管理工具,类似于vue的vuex。redux可以不和任何框架绑定,独立使用
2.使用步骤
(1)定义一个reducer函数(根据当前想要做的修改返回一个新的状态)
(2)使用createStore方法传入erducer函数生成一个store实例对象
(3)使用store实例的subscribe方法订阅数据变化(数据一旦变化可以得到通知)
(4)使用store实例的dispatch方法提交action对象 触发数据变化(告诉reducer你想要怎么改数据)
(5)使用store实例的getState方法获取最新的状态数据更新到视图中
3.代码案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="decrement">-</button>
    <span id="count">0</span>
    <button id="increment">+</button>

    <script src="https://cdn.bootcss.com/redux/4.0.0/redux.js"></script>
    <script>
      // 1.定义reducer函数
      // 作用:根据不同的action对象,返回不同的新的state
      //   state:管理的数据初始状态
      // action:对象type标记当前想要做什么样的修改
      function reducer(state = { count: 0 }, action) {
        // 数据不可变:基于原始状态生成一个新的状态
        if (action.type === "INCREMENT") {
          return { count: state.count + 1 };
        }
        if (action.type === "DECREMENT") {
          return { count: state.count - 1 };
        }
        return state;
      }
      // 2.通过reducer函数生成store实例
      const store = Redux.createStore(reducer);
      // 3.通过store实例的subscribe订阅数据变化
      //   回调函数可以在每次state发生变化时自动执行
      store.subscribe(() => {
        console.log("state变化了");
        document.getElementById("count").innerText = store.getState().count;
      });
      // 4.通过store实例的dispatch函数提交action更改状态
      const inBtn = document.getElementById("increment");
      inBtn.addEventListener("click", () => {
        store.dispatch({
          type: "INCREMENT",
        });
      });
      const dBtn = document.getElementById("decrement");
      dBtn.addEventListener("click", () => {
        store.dispatch({
          type: "DECREMENT",
        });
      });
    </script>
  </body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大兵的猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值