在 Redux 中,将数据保持在初始状态后,应通过从该数据中获取特定 ID 来增加计数器的值。请做什么,需要建议和实施。
代码是-
// Unique Id Generate
let counter = 1;
// Array for save Data for through initialState
let saveData=[];
function generateUniqueId() {
const id = counter;
count=0;
counter++;
saveData.push({id,count});
return id;
}
function addMatchs(){
// Matches
const matches=document.createElement('div');
matches.setAttribute('id',generateUniqueId());
matches.setAttribute('class','match');
.....
// Result
const result=document.createElement('div');
result.setAttribute('class','numbers');
const resultHeading=document.createElement('h2');
resultHeading.setAttribute('class','res');
resultHeading.innerHTML=120;
...append
}
// Redux
// Constant Variable
const INCREMENT='increment';
const DECREMENT='decrement';
const counters=document.querySelector('.lws-singleResult');
const incrementEl=document.querySelector('.lws-increment');
const decrementEl=document.querySelector('.lws-decrement');
// Action Creators
const increment=(value)=>{
return {
type:INCREMENT,
payload:value,
};
}
const decrement =(value)=>{
return {
type:DECREMENT,
payload:value,
};
}
const initialState=saveData;
console.log(initialState)
// Create Reducer
function counterReducer(state=initialState,action){
switch(action.type){
case INCREMENT:
return {
...state,
state:state.count+action.payload
};
case DECREMENT:
return {
...state,
state:state.count-action.payload
};
case 'reset':
return {
state:0
};
default:
return state;
}
}
// Create Store
const store = Redux.createStore(counterReducer);
const render = () => {
const state = store.getState();
// console.log(state[0].id)
counters.innerHTML=state[0].count;
};
store.subscribe(render);
// button click listeners
incrementEl.addEventListener("click", () => {
store.dispatch(increment(2));
});
decrementEl.addEventListener("click", () => {
store.dispatch(decrement(3));
});
enter image description here
在 Redux 中,将数据保持在初始状态后,应通过从该数据中获取特定 ID 来增加计数器的值。请做什么,需要建议和实施。