redux初上手 - Githubissues

OctupleSakura commented 6 years ago

第一次写react项目写的有些飘飘然了= =
直到我看到了redux,相比起vuex来说还是要更难一些的。
大概理了一下整个的流向应该是下面这样

Action=>Dispatch=>Reducer=>Store=>Subsuribe

然后又找了一个小时的文章才弄明白怎么和context去结合起来,可能太笨了QAQ
后续再补充吧,跟公司小伙伴们去玩了~

OctupleSakura commented 6 years ago

没有涉及到太多不敢装x,在此先简单记录下redux的所见所得,基本上是看着阮一峰大佬的教程走的QAQ
要说数据怎么走上面写的还是太随意了= =。

实际上reducer在初始化store的时候就已经就已经加载好了,在初始化的时候我们可以传入两个参数。

初始化的state(通常是服务端给,当然这个参数不传也是可以的)
reducer,负责计算新的state

const store = createStore(reducer,  { a: true })

那么这样一个store便初始化完成。

action是一个对象，对象里面描述的是我要对store做怎么样的一个操作,就像下面这样

const action = { type: 'fuck', payload: true };

当然只是一个描述,实际执行操作则是由dispatch去执行,也就是说dispatch将action所要做的操作再提交去执行。

那么处理我们的操作的就是初始化时传入的reducer。reducer在接收到dispatch过来的action,在判断完之后需要return一个新的state,reducer的第一个参数就是当前的state第二个参数是action,就像下面这样0.0

const reducer = (state, action) => {
  switch (action.type) {
    case 'add':
      return { 
        ...state, 
        add: action.payload
      };
    default:
      return state;
  }
}

export default reducer;

那么这个时候我们的store就会跟着改变了(´▽`)

最后我们要做的一步就是更改dom的一个状态,通过subsuribe来监听store的状态,当发生改变的时候他会执行这个函数,这个时候我们可以在这个函数里面去做对数据的操作进而修改dom的一个状态。一般是如下这样。

store.subscribe(listener);

一般来说有两个做法:

重新去加载一遍render函数
```
store.subscribe(render);
```
修改实例中的state
```
store.subscribe(()=>{
let newState = store.getState();
this.setState(newState);   
});
```
顺带一提放在组件外面的时候我不知道怎么去拿到这个实例....因此我直接把它丢到了constructor函数当中用this去拿到实例= =
这个时候我们绑了state的元素就会根据store的变化产生变化。

yuxino commented 5 years ago

transferred this issue from another repository 33 minutes ago

吓到我了我以为你玩了一年

OctupleSakura commented 5 years ago

@yuxino 之前积累的一点东西不想丢掉，就扔过来了 (:3 」∠ )

OctupleSakura / OctupleSakura.github.io

redux初上手 #2

Action=>Dispatch=>Reducer=>Store=>Subsuribe