반응 - 원시 redux 상태를 다시 채우십시오

Question

그것은 질문의 구성 요소입니다. 구성 요소가 마운트되기 전에 {this.props.populateGrid()} 액션이 성공적으로 전달됩니다. 모든 것은 괜찮습니다. 로거에서 상태를 볼 수 있습니다 (기본적으로는 임의의 숫자가 중첩 된 배열입니다). 버튼을 누르면 상태가 새로운 난수로 다시 채워집니다. 그러나 다음 오류가 발생합니다. 정의되지 않은 'populateGrid'속성을 읽을 수 없습니다.

import React, { Component, PropTypes } from 'react'; 
import { View, StyleSheet, Button } from 'react-native'; 
import Grid from './Grid'; 
import * as globalStyles from '../styles/global'; 


export default class Body extends Component { 

    componentWillMount() { 
    this.refresh(); 
    } 

    refresh() { 
    this.props.populateGrid(); 
    } 
    render() { 
    return (
     <View style={styles.body}> 
     <Grid inGrid={this.props.grid} /> 
     <Button 
      onPress={this.refresh} 
      title={'Regenerate the Grid'} 
     /> 
     </View> 
    ); 
    } 

} 

컨테이너 :

import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux'; 

import { listNumbers, pickNumber } from '../actions/numberActions'; 
import { populateRow, populateGrid } from '../actions/gridActions'; 
import Body from '../components/Body'; 

const mapStateToProps = state => ({ 
    numbers: state.numbers, 
    grid: state.grid 
}); 

const mapDispatchToProps = dispatch => (
    bindActionCreators({ 
    listNumbers, 
    pickNumber, 
    populateRow, 
    populateGrid 
    }, dispatch) 
); 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(Body); 

조치 :

import { POPULATE_ROW, POPULATE_GRID } from './actionTypes'; 
import { randNumbers, randGrid } from '../utils/generators'; 

export const populateRow = (n) => { 
    return { 
    type: POPULATE_ROW, 
    payload: randNumbers(n) 
    }; 
}; 

export const populateGrid =() => { 
    return { 
    type: POPULATE_GRID, 
    payload: randGrid() 
    }; 
}; 

감속기 : 숫자

import { POPULATE_ROW, POPULATE_GRID } from '../actions/actionTypes'; 

export default (state = [], action = {}) => { 
    switch (action.type) { 
    case POPULATE_ROW: 
     return action.payload || []; 
    case POPULATE_GRID: 
     return action.payload || []; 
    default: 
     return state; 
    } 
}; 

발생기 (이것은이 경우에 두 번째 함수의)

<Button 
    onPress={this.refresh.bind(this)} 
    title={'Regenerate the Grid'} 
/> 

희망하는 데 도움이 :

export const randNumbers = (n) => { 
    let numbers = new Array(n); 
    const shuffled = []; 

    // fill one array with the numbers 1-10 
    numbers = numbers.fill(1).map((_, i) => i + 1); 

    // shuffle by taking a random element from one array 
    // and pushing it to the other array 
    while (numbers.length) { 
    const idx = numbers.length * Math.random() | 0; // floor trick 
    shuffled.push(numbers[idx]); 
    numbers.splice(idx, 1); 
    } 
    return shuffled; 
}; 

export const randGrid =() => { 
    const shuffled = randNumbers(6); 
    const array = shuffled.map(a => { 
     let r = new Array(6); 
     r = [a, ...randNumbers(5)]; 
     return r; 
    }); 
    return array; 
}; 

Answer 1

난 당신이 refresh가 실행될 때 this 있도록 제대로 설정되어, 당신의 onClick 핸들러에 refresh 방법에 this을 결합 할 필요가 있다고 생각합니다!