Develop Reference

Vue3 Reactive value is not updating as expected

I have this .ts file:
import { reactive, toRefs } from 'vue'
export const TitleComponent = () => {
const obj = reactive({
title: "This should be reactive"
})
const updateObj = () => {
obj.title = 'This is now different'
}
return {...toRefs(obj), updateObj }
}
I then import is into a vue component which DISPLAYS it
<template>
<h1>{{ title }}</h1>
</template>
import { defineComponent } from 'vue'
import { TitleComponent } from 'some/place'
export default defineComponent({
const { title } = TitleComponent()
return { title }
})
Then, I use the function updateObj in another component that runs that method. But it doesn't update the title value. What gives?
<template>
<button #click="updateObj">Click Me</button>
</template>
import { defineComponent } from 'vue'
import { TitleComponent } from 'some/place'
export default defineComponent({
const { updateObj } = TitleComponent()
return { updateObj}
})

Move obj outside of export const TitleComponent = () => {}.
import { reactive, toRefs } from 'vue';
const obj = reactive({
title: 'This should be reactive'
});
export const TitleComponent = () => {
const updateObj = () => {
obj.title = 'This is now different'
};
return { ...toRefs(obj), updateObj };
}
When its inside and you import/call TitleComponent() it creates a new instance of obj every time.

I am getting TypeError: this.props.function is not a function while fetching from an api

I am trying to fetch data from an api, but I am getting an error: TypeError: this.props.getPeople is not a function, while everything looks good through the code, as below:
people-component.js
import React, { Component } from 'react';
import './people-component-styles.css';
import { Container, Row, Col, Card } from 'react-bootstrap';
import { connect } from 'react-redux';
import { getPeople } from '../../actions/index'
import 'react-lazy-load-image-component/src/effects/blur.css';
import 'animate.css/animate.min.css';
export class People extends Component {
componentDidMount() {
// console.log(this.props);
this.props.getPeople();
}
render() {
// console.log(this.props);
return (
<Row className='main'>
hello!
</Row>
);
}
}
const mapStateToProps = state => ({
people: state.people
})
const mapDispatchToProps = dispatch => ({
getPeople: () => dispatch(getPeople())
})
export default connect(
mapStateToProps,
mapDispatchToProps
)(People);
actions/index.js
export const getPeople = () => {
console.log("yes");
return async dispatch => {
const response = await fetch('https://dma.com.eg/api.php?action=getPeople', {
method: 'GET'
})
const json = await response.json();
dispatch({ type: "GET_PEOPLE", payload: json });
}
}
reducers/index.js
const INITIAL_STATE = {
people: []
}
const rootReducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
case "GET_PEOPLE":
return ({
...state,
people: state.people.concat(action.payload)
})
default:
return state;
}
};
export default rootReducer

I was importing People component as name while it's exported as default, thanks to #Brian Thompson .. it's fixed.

Why my "mapDispatchToProps" does not see my action function?

Please tell me why, when I call this.props.getOnEvents(), an error occurs that “getOnEvents() is not a function”, what’s wrong here and how to fix it?
I’m looking at the console.log and there is this function in the props, but when I try to call, an error flies out that it’s not a function
EventCalendar.js
import React, { Component } from 'react';
import { withStyles } from '#material-ui/core/styles';
import EventCalendarTable from './EventCalendarTable';
import EventCalendarView from './EventCalendarView';
const styles = theme => ({
root: {
width: '80%',
margin: '20px auto 0'
},
});
class EventCalendar extends Component {
constructor(props) {
super(props);
this.state = {
viewEvents: 'table'
};
}
componentDidMount() {
this.props.onGetEvents();
}
changeEventsView = (value) => {
this.setState({ viewEvents: value });
}
render() {
console.log(this.props);
const { classes } = this.props;
return (
<div className={classes.root}>
<EventCalendarView changeEventsView={this.changeEventsView}/>
{
this.state.viewEvents === 'table'
? <EventCalendarTable />
: <div>test</div>
}
</div>
);
}
}
export default withStyles(styles)(EventCalendar);
EventPage/component.jsx
import React from 'react';
import EventCalendar from '../../components/EventCalendar';
import './index.scss';
function Events(props) {
return (
<React.Fragment>
<EventCalendar props={props}/>
</React.Fragment>
);
}
export default Events;
EventPage/container.js
import { connect } from 'react-redux';
import EventsPage from './component';
import { getEvents } from '../../../store/modules/Events/operations';
const mapStateToProps = ({ Events }) => ({
Events
});
const mapDispatchToProps = dispatch => ({
onGetEvents: () => {
console.log(123);
dispatch(getEvents());
}
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(EventsPage);
Events/actions.js
import * as types from './types';
export const eventsFetch = value => ({
type: types.FETCHING_EVENTS,
payload: value
});
export const setEvents = ({ objById, arrayIds }) => ({
type: types.SET_EVENTS,
payload: {
eventById: objById,
eventsOrder: arrayIds
}
});
Events/types.js
export const FETCHING_EVENTS = 'Events/FETCHING_EVENTS';
export const SET_EVENTS = 'Events/SET_EVENTS';
Events/operation.js
import FetchClient from 'app/utils/FetchClient';
import IdsAndByIds from 'app/utils/IdsAndByIds';
import { eventsFetch, setEvents } from './actions';
export const getEvents = () => async (dispatch) => {
try {
const { data } = await FetchClient.get('/events');
dispatch(setEvents(IdsAndByIds(data)));
dispatch(eventsFetch(false));
} catch (error) {
console.log(error);
}
};
Events/reducer.js
import { createReducer } from 'store/utils';
import * as types from './types';
const usersInitState = {
fetching: true,
events: {
eventById: null,
usersOrder: null
},
error: null
};
const eventsReducer = createReducer(usersInitState)({
[types.FETCHING_EVENTS]: (state, { payload }) => ({
...state,
fetching: payload
}),
[types.SET_EVENTS]: (state, { payload }) => ({
...state,
events: {
...payload
}
})
});
export default eventsReducer;
Events/index.js
import { combineReducers } from 'redux';
import * as eventsListOperations from './operations';
import reducer from './reducers';
const EventsReducer = combineReducers({
eventsList: reducer
});
export default EventsReducer;
export { eventsListOperations };

The issue here is a minor one, Since you are connecting Events component to connect, you are receiveing the prop onGetEvents in that component, Now inside this component you are passing the props by a name props to the EventCalendar component
<EventCalendar props={props}/>
Now the props in EventCalender will contain a key called as props which wil lhave your data but you are trying to access it directly on props which is why it is undefined.
The correct way to pass the props here would be to use spread syntax like
<EventCalendar {...props}/>

Getting 'dispatch is not defined' in redux component

I am trying to get a list of names stored in firebase to save to the redux store when the component loads. This list then gets sent to a dropdown component as props which are rendered as selectable options in the dropdown. For some reason I am getting 'dispatch is not defined' and I am not sure how to fix.
This is my code:
//store
import * as redux from 'redux';
import thunk from 'redux-thunk';
import {userReducer, exampleReducer, namesReducer} from 'reducers';
export var configure = (initialState = {}) => {
const reducer = redux.combineReducers({
user: userReducer,
example: exampleReducer,
names: namesReducer
})
var store = redux.createStore(reducer, initialState, redux.compose(
redux.applyMiddleware(thunk),
window.devToolsExtension ? window.devToolsExtension() : f => f
));
return store;
};
//reducers
export var namesReducer = (state = [], action) => {
switch (action.type) {
case 'GET_NAMES':
return [
action.names
]
default:
return state;
}
}
//actions
export var getNames = (names) => {
return {
type: 'GET_NAMES',
names
}
};
export var startGetNames = () => {
console.log("action started")
return (dispatch) => {
var nameRef = firebase.database().ref().child('names');
return nameRef.once('value').then((snapshot) => {
var data = snapshot.val();
_.map(data, function(name) {return finalArr.push(
{
display: `${name.first_name} ${name.last_name}`,
value: name.id
}
)});
dispatch(getNames(finalArr));
})
}
}
//component
import _ from 'underscore';
import React from 'react';
import { render } from "react-dom";
import {connect} from 'react-redux';
import Modal from 'react-responsive-modal';
var actions = require('actions');
var firebase = require('firebase/app');
require('firebase/auth');
require('firebase/database');
//components
import roomBookingForm from 'roomBookingForm';
import PanelHeader from 'PanelHeader';
import PanelItem from 'PanelItem';
import Table from 'Table';
import TableRow from 'TableRow';
import TableHeaderCell from 'TableHeaderCell';
import TextInput from 'TextInput';
import Dropdown from 'Dropdown';
class roomBooking extends React.Component {
constructor(props) {
super(props);
this.state = {
pageTitle: "Appointment Creation",
openForm: false
}
}
componentWillMount() {
this.props.clinicians
}
onOpenModal = () => {
this.setState({openForm: true});
}
modalClose = () => {
this.setState({ openForm: false });
};
render() {
return (
<div className="main-container">
<div className="options-menu">
<PanelHeader >
Options
</PanelHeader>
<PanelItem onClick={this.onOpenModal} propClassLeft="left-item" propClassRight="right-item">Create Appointment</PanelItem>
</div>
<div>
<Table className="display-table">
<TableRow className="display-table-head">
<TableHeaderCell className="name" displayText="Name" />
</TableRow>
</Table>
</div>
<roomBookingForm open={this.state.openForm} onClose={this.modalClose} options={this.props.names} />
</div>
)
}
}
const mapDispatchToProps = (dispatch) => {
names : dispatch(actions.startGetNames())
}
export default connect()(roomBooking);

You have two correction in your code.
1.
You need to pass mapDispatchToProps in the connect call.
const mapDispatchToProps = (dispatch) => {
names : dispatch(actions.startGetNames())
}
export default connect(null,mapDispatchToProps)(roomBooking);
2.To call asynchronous action method with react-redux,the right signature is :
export var startGetNames = () => (dispatch) => {
return (dispatch) => {
//code
}
}

There are few issues with your code:
finalArr is not defined before using it.
dispatch does not work like this. It needs to be called like store.dispatch({ACTION}). So, you'll need to import store.

you should pass mapDisPatchToProps to connect function:
const mapDispatchToProps = (dispatch) => {
names : dispatch(actions.startGetNames())
}
export default connect(function(){},mapDispatchToProps)(roomBooking);

React-redux state updates but component does not rerender

There like hundreds of questions about this topic but nothing worked for me.
As you can see in the picture above that the state is obviously updating by this.props.getSubcontractors(); in
containers/SubcontractorListPage.js componentWillMount() function. But the viewComponent SubcontractorList.js does not rerender on Props change. There is a blank page.
containers/SubcontractorListPage.js
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import SubcontractorList from
'../components/viewComponents/SubcontractorList/SubcontractorList';
import * as SubcontractorActions from '../actions/subcontractor';
class SubcontractorListPage extends Component {
static propTypes = {
getSubcontractors: PropTypes.func.isRequired,
subcontractor: PropTypes.object.isRequired,
};
componentWillMount() {
console.log(this.props);
this.props.getSubcontractors();
}
render() {
return (
<SubcontractorList subcontractors=
{this.props.subcontractor.subcontractors} />
);
}
}
export default connect(
state => ({ subcontractor: state.subcontractor }),
dispatch => bindActionCreators(SubcontractorActions, dispatch)
)(SubcontractorListPage);
components/viewComponents/SubcontractorList/SubcontractorList.js
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import styles from './SubcontractorList.scss';
class SubcontractorList extends Component {
static propTypes = {
subcontractors: PropTypes.array.isRequired,
};
render() {
const subcontractors = this.props.subcontractors;
let display = <div />;
console.log(subcontractors);
display = (
<div className={styles.Breadcrumb}>
{subcontractors.map((item) =>
<div className={styles.Item} key={item.Id}>
{item.Name}lol</div>
)}
</div>
);
return display;
}
}
export default SubcontractorList;
actions/subcontractor.js
export const SUBCONTRACTORS_GET = 'SUBCONTRACTORS_GET';
export const SUBCONTRACTOR_GET = 'SUBCONTRACTOR_GET';
export const SUBCONTRACTOR_ADD = 'SUBCONTRACTOR_ADD';
export const SUBCONTRACTOR_EDIT = 'SUBCONTRACTOR_EDIT';
export const SUBCONTRACTOR_DELETE = 'SUBCONTRACTOR_DELETE';
export function getSubcontractors() {
return {
type: SUBCONTRACTORS_GET
};
}
export function getSubcontractor() {
return {
type: SUBCONTRACTOR_GET
};
}
reducers/subcontractor.js
import { SUBCONTRACTORS_GET, SUBCONTRACTOR_GET } from
'../actions/subcontractor';
import getTable from '../utils/dbHelper/getTable';
const initialState = {
subcontractors: [],
subcontractor: {}
};
export type subcontractorStateType = {
subcontractors: [],
subcontractor: {}
};
type actionType = {
type: string
};
export default function subcontractor(state: {} = initialState,
action: actionType) {
switch (action.type) {
case SUBCONTRACTORS_GET:
return {
...state,
subcontractors: getTable('SUBCONTRACTOR')
};
case SUBCONTRACTOR_GET:
console.log('SUBCONTRACTORS_GET');
break;
default:
return state;
}
}
How to resolve this?
Update
const sqlite3 = require('sqlite3').verbose();
const dbSrc = '../testdb';
export default function getTable(tablename) {
const db = new sqlite3.Database(dbSrc);
const queries = [];
db.each(`SELECT * FROM ${tablename}`, (err, row) => {
queries.push(row);
console.log(row);
});
db.close();
return queries;
}