반응을 사용하여 목록에 항목을 추가하는 방법은 무엇입니까?

Question

나는 내 코드 사용자를 눌러 내 데모 .IN 버튼을 추가 할 때 나는 목록에 입력 필드의 텍스트 값을 추가 할 https://plnkr.co/edit/JEG6o4JCBIQWAt2A4S3r?p=preview

내가 원하는 클릭에 하나 add button이 문서라도 인 반응을 사용하여 목록에 항목을 추가하는 것을 시도하고있다 목록에 항목을 추가합니다. 내가 잘못하고있는 곳을 알려주시겠습니까? 당신이 당신의 감속기에 반환 무엇

// Code goes here 

const { createStore, bindActionCreators, applyMiddleware,combineReducers } = Redux; 
const { Provider, connect } = ReactRedux; 
const thunk = window.ReduxThunk.default; 


const first_redux =function(state ='' ,action){ 
    switch (action.type){ 
    case 'ADD_ITEM': 
    return action.payload 
    default : 
    return state 

    } 
} 

const actions ={ 
addItem :function(item){ 
    return { 
    type :"ADD_ITEM", 
    payload :item 
    } 
} 

} 
var combindReducer = combineReducers({ 
    item:first_redux 
}) 

const store = createStore(combindReducer); 

class First extends React.Component { 
    constructor (props){ 
    super(props); 
    this.state = { 
     names :[], 
     username :'' 
    } 
    this.changeEv =this.changeEv.bind(this); 
    this.addName =this.addName.bind(this); 
    } 
    changeEv(e){ 
    this.setState({ 
     username : e.target.value 
    }) 
    } 
    addName(){ 
    // this.state.names.push(this.state.username); 
    console.log(this.state); 
    this.props.add(this.state.username) 
    } 

    render() { 
    const data =[{"name":"test1"},{"name":"test2"}]; 
    var listItems = this.state.names.map(function(d, idx){ 
     return (<li key={idx}>{d.name}</li>) 
    }) 
    return (
     <div> 
     <input type="text" onChange ={this.changeEv}/> 
     <button onClick={this.addName}>add</button> 
     {listItems} 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state){ 
    console.log('================='); 
    console.log(state); 
    return { 
     names: state.item, 

    }; 
    console.log(this.state); 

} 

function mapDispatchToProps(dispatch){ 
    return { 
    add:bindActionCreators(actions.addItem,dispatch) 
    } 
} 
const Appcontainer =connect(mapStateToProps,mapDispatchToProps)(First) 

ReactDOM.render(
    <Provider store ={store}> 
    <Appcontainer/> 
    </Provider> 
    ,document.getElementById('root')); 

Answer 1

당신이 REDUX를 사용할 때 나는이 경우 코드에서 몇 가지 변화를 만들어

입니다과 mapDispatchToProps입니다 전역 상태를 구성 요소의 소품과 매핑합니다.

// 코드는 여기

const { createStore, bindActionCreators, applyMiddleware,combineReducers } = Redux; 
const { Provider, connect } = ReactRedux; 
const thunk = window.ReduxThunk.default; 

const initialState = [] 

const first_redux =function(state = initialState ,action){ 
    switch (action.type){ 
    case 'ADD_ITEM': 
    let newState = action.payload; 
    return [...state,newState]; 
    default : 
    return state 

    } 
} 

const actions ={ 
addItem :function(item){ 
    return { 
    type :"ADD_ITEM", 
    payload :item 
    } 
} 

} 
var combindReducer = combineReducers({ 
    item:first_redux 
}) 

const store = createStore(combindReducer); 

class First extends React.Component { 
    constructor (props){ 
    super(props); 
    this.state = { 
     username :'' 
    } 
    this.changeEv =this.changeEv.bind(this); 
    this.addName =this.addName.bind(this); 
    } 
    changeEv(e){ 
    this.setState({ 
     username : e.target.value 
    }) 
    } 
    addName(){ 
    // this.state.names.push(this.state.username); 
    console.log(this.state); 
    this.props.add(this.state.username) 
    } 

    render() { 
    const data =[{"name":"test1"},{"name":"test2"}]; 
    var listItems = this.props.names.map(function(d, idx){ 
     return (<li key={idx}>{d}</li>) 
    }) 
    return (
     <div> 
     <input type="text" onChange ={this.changeEv}/> 
     <button onClick={this.addName}>add</button> 
     {listItems} 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state){ 
    console.log('================='); 
    console.log(state); 
    return { 
     names: state.item, 

    }; 
    console.log(this.state); 

} 

function mapDispatchToProps(dispatch){ 
    return { 
    add:bindActionCreators(actions.addItem,dispatch) 
    } 
} 
const Appcontainer =connect(mapStateToProps,mapDispatchToProps)(First) 

ReactDOM.render(
    <Provider store ={store}> 
    <Appcontainer/> 
    </Provider> 
    ,document.getElementById('root')); 

https://plnkr.co/edit/e6oJXempwk0e5GciOSSB?p=previewp

간다

Answer 2

는 기본적으로 응용 프로그램의 상태이지만, 지금 방금이 경우, 귀하의 페이로드, 따라서 귀하의 상태를 반환하고, 단지 하나의 항목입니다. 그래도 원하는 것은 주를 항목 목록으로 지정하는 것이므로 국가는 페이로드 만 반환하는 것이 아니라 배열을 만들어야합니다. 감속기의 상태는 변경 불가능해야하므로 새 페이로드를 마지막 상태로 간단하게 푸시 할 수 없습니다. 여기

는이 구현할 수있는 방법의 예 :

, 저장소가 구성 요소의 외부

const first_redux = function(state = [] ,action){ 
    switch (action.type){ 
    case 'ADD_ITEM': 
     return [ 
     ...state, 
     action.payload 
     ]; 
    default : 
     return state 
    } 
} 

var combindReducer = combineReducers({ 
    items: first_redux 
}) 

function mapStateToProps(state){ 
    console.log('================='); 
    console.log(state); 
    return { 
    names: state.items, 
    }; 
}