Redux-002-创建页面-基于redux

原视频链接：https://www.qiuzhi99.com/movies/react-redux/149.html

参考链接

https://redux.js.org/api-reference/createstore
https://cn.redux.js.org/docs/basics/Store.html

• index.js

import {createStore} from ‘redux’;
import reducer from './reducers/counter’;

const store = createStore(reducer);

const render = ()=>{
ReactDOM.render(<App value={store.getState()}
onincrement={()=> store.dispatch({type:"INCREMENT”})}
onDecrement={ () => store.dispatch({ type: "DECREMENT" }) }
/>, document.getElementById('root’));
}

render();

store.subscribe(render); //订阅事件

1- store.dispatch//触发事件
2- store.subscribe(render);//订阅事件
3- onincrement，onDecrement 从reducers中导入
4-reducers定义事件的处理
- reducers的参数是state和action
- 其中store.dispatch触发的是action

const counter = (state = 0, action = {}) => {
switch(action.type) {
case ‘INCREMENT’:
return state + 1;
case ‘DECREMENT’:
return state - 1;
default: return state;
}
}
export default counter;

image.png

1- 页面加载首先会触发default: return state;

image.png

2- 点击increment按钮触发case ‘INCREMENT’:

学习Redux总是感觉找不到事件绑定和调用的逻辑，以及如何传值；
很是费解。

自己总结如下：

• 首先定义事件Reducer
  1- state
  2- action
• index.js中事件绑定和触发
• app.js中按钮的事件 触发action

state的变更会触发页面的刷新？
还是比较混乱，希望能慢慢理解。