dux-(4)dispatch時にデータ送信可能
dispatch()
dispatch()で変更を要求したときにデータを送信することもできます.
props.dispatch({ type: 타입명, payload: 보낼데이터 })
アクションパラメータ
Actionパラメータ範囲
送信されたデータはreduce関数の2番目のパラメータactionに格納されます.
A.js
index.js
console.ログ結果
「プロジェクトの追加」ボタンをクリックして、ペイロードに送信されたデータを追加します。
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import { combineReducers, createStore } from 'redux';
let initialValue = [
{ id: 0, name: 'jeju', quan: 2 },
{ id: 1, name: 'gimpo', quan: 5 },
{ id: 2, name: 'seoul', quan: 7 },
{ id: 3, name: 'busan', quan: 1 },
{ id: 4, name: 'deagu', quan: 12 }
]
function reducer(state = initialValue, action) {
console.log(action);
console.log(action.payload);
let copyValue = [...state];
if(action.type === 'add'){
copyValue.push(action.payload)
return copyValue;
}
// else if(action.type === 'delete'){
// copyValue.pop();
// return copyValue;
// }
else if(action.type === 'plus'){
if(copyValue[0].quan !== 10) {
copyValue[0].quan++;
return copyValue;
}
else if(copyValue[0].quan === 10) {
copyValue[0].quan = 10
return copyValue;
}
}
else if(action.type === 'minus'){
if(copyValue[0].quan !== 0) {
copyValue[0].quan--;
return copyValue;
}
else if(copyValue[0].quan === 0) {
copyValue[0].quan = 0
return copyValue;
}
}
else {
return state;
}
}
let alertInitial = true;
function reducer2(state=alertInitial, action){
if(action.type === 'close'){
state = false
return state;
}
else {
return state;
}
}
let store = createStore(combineReducers({reducer, reducer2}));
ReactDOM.render(
<React.StrictMode>
<Provider store={ store }>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
//A.js
import React from 'react';
import { Table } from 'react-bootstrap';
import { connect } from 'react-redux';
function A(props){
return (
<div>
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>id</th>
<th>Name</th>
<th>Quan</th>
<th>Set</th>
</tr>
</thead>
<tbody>
{
props.state.map((el, i)=>{
return(
<tr key={ i }>
<td>{ i }</td>
<td>{ el.id }</td>
<td>{ el.name }</td>
<td>{ el.quan }</td>
<td>
<button onClick={ ()=>{ props.dispatch({ type: 'plus', payload: {name: 'kim'} }) } }>+</button>
<button onClick={ ()=>{ props.dispatch({ type: 'minus' }) } }>-</button>
</td>
</tr>
)
})
}
</tbody>
</Table>
{
props.alert
? (
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
<button onClick={()=>{ props.dispatch({ type: 'close' }) }}>닫기</button>
</div>
)
: null
}
<button onClick={()=>{ props.dispatch({ type: 'add', payload: { id: 5, name: 'jeonju', quan: 23 } }) }}>항목추가</button>
</div>
)
}
function 함수명(state){
console.log(state);
return {
state: state.reducer,
alert: state.reducer2
}
}
export default connect(함수명)(A);
Reference
この問題について(dux-(4)dispatch時にデータ送信可能), 我々は、より多くの情報をここで見つけました https://velog.io/@starkdy/Redux-4dispatch할-때-데이터-실어보낼-수-있음テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol